一、定义
采用flex布局的元素，称为flex容器，里面的子元素为item。
二、语法
（1）块级元素： display：flex
（2）行内元素： display:inline-flex
设为flex布局以后，flex item的float、clear、vertical-align属性将失效
三、flex容器的属性
|
容器属性 |
说明 |
|
flex-direction |
决定主轴的方向（项目的排列方向） |
|
flex-wrap |
定义是否换行 |
|
flex-flow |
direction和wrap的复合属性，默认值为row和nowrap |
|
Justify-content |
定义项目在主轴上的对齐方式 |
|
Align-items |
定义项目在交叉轴的对齐方式 |
|
Align-content |
定义多根轴线的对齐方式，若项目只有一根轴线，该属性无效 |
1、flex-direction
|
Flex-direction:row |
项目水平排列,顺序为从左到右 |
|
Flex-direction:row-reverse |
项目水平排列,顺序为从右到左 |
|
Flex-direction:column |
项目垂直排列,顺序为从上到下 |
|
Flex-direction:column-reverse |
项目垂直排列,顺序为从下到上 |
2、flex-wrap
|
nowrap（默认值） |
不换行。如果盒子宽度容纳不下，将等比例缩小盒子大小 |
|
wrap |
换行，顺序不改变，第一行仍在上方 |
|
wrap-reverse |
换行，顺序改变,第一行和第二行调转 |
3、flex-flow
是direction和wrap的简写，为复合属性。默认值分别为row 和 nowrap
只写一个值，代表另一个值默认。
4、justify-content（主轴对齐方式）
|
属性值 |
说明 |
|
flex-strat(默认值) |
左对齐 |
|
flex-end |
右对齐 |
|
center |
居中 |
|
space-between |
项目两端对齐，各项目之间间隔相等 |
|
space-around |
各项目之间间隔相等，且是一左一右盒子与边框距离的两倍，盒子与边框的距离也相等 |
|
space-evenly | 表示item之间左右的间距以及项目和边框之间的距离都相等 |
5、align-items（交叉轴对齐方式）
|
属性值 |
说明 |
|
flex-strat(默认值) |
顶部对齐 |
|
flex-end |
底部对齐 |
|
center |
居中 |
|
base-line |
以项目的第一行文字基线对齐 |
|
Stretch (默认值) |
若项目未设置高度或高度未auto，将占满整个容器的高度 |
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/206876.html原文链接：https://javaforall.net
