flex弹性盒⼦布局
⼀、Flex布局是什么？
Flex是Flexible Box的缩写，翻译成中⽂就是“弹性盒⼦”，⽤来为盒装模型提供最⼤的灵活性。任何⼀个容器都可以指定为Flex布局。
.box{
display: -webkit-flex; /*在webkit内核的浏览器上使⽤要加前缀*/
display: flex; //将对象作为弹性伸缩盒显⽰
}
当然，⾏内元素也可以使⽤Flex布局。
.box {
display: inline-flex; //将对象作为内联块级弹性伸缩盒显⽰
}
⼆、基本概念
采⽤Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有⼦元素⾃动成为容器成员，成为Flex项⽬(Flex item)，简称“项⽬”。
结构⽰意图
容器默认存在两根主轴：⽔平⽅向主轴(main axis)和垂直⽅向交叉轴(cross axis)，默认项⽬按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项⽬占据主轴/交叉轴的空间；
三、容器属性
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
flex-direction属性：决定主轴的⽅向（即项⽬的排列⽅向）
.box {
flex-direction: row | row-reverse | column | column-reverse; }
row（默认）：主轴⽔平⽅向，起点在左端；
row-reverse：主轴⽔平⽅向，起点在右端；
column：主轴垂直⽅向，起点在上边沿；
column-reserve：主轴垂直⽅向，起点在下边沿。
主轴的4个⽅向
flex-wrap属性：定义换⾏情况
默认情况下，项⽬都排列在⼀条轴线上，但有可能⼀条轴线排不下。flex布局对齐方式
⼀条轴线排不下
.box{
flex-wrap: nowrap | wrap | wrap-reverse; }
nowrap（默认）：不换⾏；
不换⾏nowrap
wrap：换⾏，第⼀⾏在上⽅；
换⾏，第⼀⾏在上
wrap-reverse：换⾏，第⼀⾏在下⽅。
换⾏，第⼀⾏在下
flex-flow属性：flex-direction和flex-wrap的简写，默认row nowrap
.box{
flex-flow: || ;
}
justify-content属性：定义项⽬在主轴上的对齐⽅式。
对齐⽅式与轴的⽅向有关，本⽂中假设主轴从左到右。
.box {
justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}
flex-start（默认值）：左对齐；
左对齐
flex-end：右对齐；
右对齐
center：居中；
居中对齐
space-between：两端对齐，项⽬之间间隔相等；
两端对齐
space-around：每个项⽬两侧的间隔相等，即项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍。
两侧间隔相等
align-items属性：定义在交叉轴上的对齐⽅式
对齐⽅式与交叉轴的⽅向有关，假设交叉轴从下到上。
.box{
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：起点对齐；
起点对齐

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。