十分钟了解flex布局
十分钟了解flex布局
以下内容来自于对Flex 布局语法教程 | 菜鸟教程 和HTML行内元素与块级元素有哪些及区别的简单阅读
块级元素与行内元素组成的盒状模型
块级元素 block：
-
默认起一个新行
-
通常来说每一行只有一个块级元素，除非使用float浮动
-
高度、行高可控制
-
外边距、内边距可控制
-
宽度缺省为父容器的100%
-
可容纳行内元素和其他块元素
-
div是最常用的块级元素，display:block也可指定为块级元素
行内元素 inline ：
-
和其他元素在同一行
-
高度、行高不可改变
-
设置margin时上下不可改变，左右可改变
-
设置padding时上下不可改变，左右可改变
-
宽度不可改变，固定为其文字或图片的宽度
-
只能容纳行内元素或文本
-
display:inline可指定为行内元素
写过前端的同学们肯定都清楚，在电脑前调整元素的各种position、float、align……耗尽万般心血才排版好，然后稍微改变一下窗口大小查看后排版就全乱了，此时的心是死的。
flex布局与flex容器
flex布局是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局，而且目前来说已经获得了所有浏览器的支持（甚至IE，泪目）。
任何一个块级元素或行内元素都可以通过display:flex转换为flex容器 (flex container)。此时，其所有的子元素将转变为flex项目 (flex item)。
需要注意的是，flex项目的子元素的float、clear、vertical-align属性会失效。
flex容器内存在着两个基础的概念：
-
main 主方向，默认水平：
-
main axis：主轴
- main start/end：主轴与容器左右边缘的交点
-
main size：每个flex项目的沿主轴方向长度
-
-
cross 与主方向交叉，默认垂直：
-
cross axis：交叉轴
- cross start/end：交叉轴与容器上下边缘的交点
-
cross size：每个flex项目的沿交叉轴方向长度
-
同时，flex容器拥有六个主要属性：
-
flex-direction：决定了主轴方向
-
row：水平方向且起点在左端
-
column：垂直方向且起点在上沿
-
row-reverse：水平方向且起点在右端
-
column-reverse：垂直方向且起点在下沿
-
-
flex-wrap：决定如果一条轴线拍不下所有flex项目时，如何换行
-
nowrap：不换行，挤在一起
-
wrap：换行，且第一行在上
-
wrap-reverse：换行，且第一行在下
-
-
flex-flow：等同于<flex-direction>\ <flex-wrap>的简写形式
-
justify-content：定义了flex项目在主轴上的对齐方式
-
flex-start：左对齐
-
flex-end：右对齐
-
center：居中
-
space-between：两端对齐，且项目间隔相同，且最边缘项目与容器边沿相接
-
space-around：两端对齐，且项目间隔相同，但是最边缘项目与容器边沿也有相同间隔
-
-
align-items：定义了flex项目在交叉轴上的对齐方式
-
flex-start：略
-
flex-end：略
-
center：略
-
stretch：若项目未设置高度或auto，则占满整个容器高度
-
baseline：项目的第一行文字的基线相互对齐
-
-
align-content：定义了不同轴线的对齐方式（与flex-wrap有关，当我们进行了换行，就会出现多条主轴）
-
flex-start：与交叉轴的起点对齐。
-
flex-end：与交叉轴的终点对齐。
-
center：与交叉轴的中点对齐。
-
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
-
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
-
stretch（默认值）：轴线占满整个交叉轴。
-
对flex项目，也有六个主要属性：
-
order：定义项目的排序键值，键值越小，排序越靠前
-
flex-grow：定义项目的放大键值。当主轴存在剩余空间时，项目间所占的main size比例将严格遵守占比键值的比例放大
-
flex-shrink：定义项目的缩小键值。当主轴拥挤时，项目间所占的main size比例将严格遵守占比键值的比例的缩小，0表示不缩小
-
flex-basis：定义项目所占的main size。auto表示为本来大小，也可指定为特定值
-
flex：相当于flex-grow、flex shrink、flex-basis的简写
-
align-self：允许单个项目与其他项目对齐方式不同（将覆盖父容器的align-items属性），其可选值与flex容器的align-items属性相同。缺省为auto，表示继承
