移动端flex学习笔记（黑马教程）-基础概念

布局原理

结论：通过给父盒子设置flex的display属性，来控制子盒子的布局
一旦父盒子设置flex,子盒子就会变成block,可以设置宽高，有点类似于设置了float

父盒子布局常见属性

设置主轴的方向：flex-direction

当存在多个子盒子，需要等间距时：就需要用到：justify-content

子盒子分配剩余空间的方式：justify-content

             display: flex;justify-content: space-around;  平均分配剩余空间

             display: flex;justify-content: space-between;  先对齐两侧，再平分剩余空间

设置子盒子是否换行：flex-wrap

一旦父盒子设置了flex，则子盒子默认不会换行，会自动压缩每个子盒子的宽度，然后显示在一行：

如果想要不压缩宽度，父盒子宽度不够能换行显示时：

侧轴上的元素排布方式

flex-flow

就是主轴为x且换行：

子盒子的常见属性

值得注意的是，它是父盒子先设置：display:flex之后，子盒子再设置flex:所占份数。
并且，谁设置了flex，谁就开始分配剩余空间，如果有多个子元素参与分配，则设置好分配的份数，它们自己会协调好谁多宽的。
例如：左右固定宽度，只有中间参与分配：

然后，左中右三个都用flex:则三者都参与分配

移动端flex学习笔记（黑马教程）-基础概念相关推荐

GIS地图学习笔记一之基础概念
要做GIS地图的开发,我们需要先了解GIS地图相关的概念. 相关概念可以在这里了解-->ArcGIS 帮助库本文是从上述网站中学习,摘抄的. 基础概念地理信息系统 (GIS) 是以可视化和分 ...
【学习笔记】JSON基础概念简介
JSON是什么? JSON即JavaScript Object Notation,是Javascript对象原生的一种表现形式.它是一种轻量级的.纯文本的,用来存储.传递和交货文本信息的格式. JSO ...
Timo学习笔记：Python基础教程（第三版）第四章当索引行不通时
第四章当索引行不通时 Timo学习笔记 :Python基础教程(第三版)第三章使用字符串这是word编辑的最后一章笔记,第五章开始将直接用这个模板记录. 本章笔记很少,也很简单.很多方法可以到要 ...
JavaScript学习笔记03【基础——对象（RegExp、Global）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
Stream 流【学习笔记】Java 基础
若文章内容或图片失效,请留言反馈. 部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 写这篇博客旨在制作笔记,方便个人在线阅览,巩固知识,无其他用途. 学习视频 [黑马 Java 基础教程] ...
Flex学习笔记（零）
推荐Flex的初学者学习Adobe官方提供的Flex in a Weekvideo series, Flex 4.5.这一系列教程虽然是英文视频,但是Adobe很贴心地给出了pdf格式的视频内容和源代 ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
菜鸟学习笔记：Java基础篇7（包装类、时间相关类、文件类、异常处理类）
菜鸟学习笔记:Java其他常用类基本数据类型包装类时间处理和文件处理相关类 Date时间类 SimpleDateFormat Calendar日历类文件类异常机制异常的概念 Java异常处理 ...
菜鸟学习笔记：Java基础篇6（数组、字符串）
菜鸟学习笔记:Java常用类(数组.字符串) 数组概述数组的定义二维数组数组查找和排序查找排序数组运用--字符串不可变字符序列(String) 可变字符序列(StringBuilder ...