CSS-flex布局（一）

容器设置

display:flex/inline-flex
display: -webkit-flex; /* Safari */ webkit内核浏览器

flex布局分为主轴（main axis）和交叉轴（cross axis）
flex布局元素为flex容器（flex container），子元素为flex项目（flex item）

设置flex后，子元素的float、clear、vertical-align失效
float:设置元素的浮动方向
clear:设置不允许出现浮动元素的一侧
vertical-align:作用于 内联元素 或 display：table-cell 的元素（float和position：absolute会使元素变为块级元素，也会导致此属性失效）

代码片

使用代码

// css
.box{
    display: flex;
    width: 500px;
    height: 500px;
    border: solid 1px black;
}
.item1{
    width: 200px;
    height: 100px;
    background-color: lightblue;
}
.item2{
    width: 100px;
    height: 200px;
    background-color: lightcoral;
}
.item3{
    width: 100px;
    height: 50px;
    background-color: yellow;
}
.item4{
    width: 100px;
    height: 200px;
    background-color: lightgreen;
}
.item5{
    width: 100px;
    height: 150px;
    background-color: lightgray;
}
}

// html
<div class="box">
	<div class="item item1"></div>
	<div class="item item2"></div>
	<div class="item item3"></div>
	<div class="item item4"></div>
	<div class="item item5"></div>
</div>

// js
let item = document.getElementsByClassName('item')
let length = item.length
for(let i = length;i--;){
    item[i].innerHTML = (i+1)+"： "+item[i].clientWidth+'px' + 
                        "<br>" +
                        (i+1)+"： "+item[i].clientHeight+'px'
}

设置display:flex后，项目按比例缩放。
原来的200px 变为 500*[200/(200+100+100+100+100)]=167px
原来的100px 变为了83px

容器属性

flex-flow: (flex-direction) (flex-wrap)

flex-flow:row nowrap 默认值

flex-direction:设置flex的主轴方向
row:左到右
row-reverse:右到左
column:上到下
column-reverse:下到上

row	column	column-reverse

flex-wrap:轴线排不开时的换行情况，若指定换行，超出容器之后会在容器外面显示
nowrap:不换行
wrap:换行顺排
wrap-reverse:换行倒排，项目会和交叉轴的底部对齐

wrap	wrap-reverse

justify-content

justify-content:flex-start 默认值
设置项目在主轴上的对齐方式
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐，间距相等
space-around:每个项目两侧间距相等，项目间的间距不重叠
space-evenly:每个项目两侧间距相等，项目间的间距重叠

新增加两个item

// html
       <div class="item item5"></div>
       <div class="item item5"></div>

flex-end	center

space-between	space-around	space-evenly

align-items

align-items:stretch 默认值
设置项目在交叉轴上如何对齐
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴中点对齐
baseline:项目第一行文字基线（文字底部）对齐
stretch:未设置高度或为auto，占满容器，若设置，效果为flex-start
修改3个item样式

// css
.item1{
    width: 200px;
    height: 100px;
    background-color: lightblue;
    font-size: 20px;
}
.item2{
    width: 100px;
    height: 200px;
    background-color: lightcoral;
    padding-top: 20px;
}
.item3{
    width: 100px;
    background-color: yellow;
}

flex-start	flex-end	center

baseline	stretch

align-content

align-content:stretch 默认值
设置多根轴线对齐方式，一根轴线情况下不起作用

便于理解，我把一个交叉轴所占的空间称为 轴体 ，stretch情况下，每个轴体都会自动（暂不明分配原则）分配空间高度。若主轴方向上下，则分配宽度。
在设置了align-content值为其他时，轴体高度为此轴内最高高度项目的高。
交叉轴起点对齐即轴体顶部对齐，交叉轴终点对齐即轴体底部对齐，交叉轴中点对齐即轴体居中对齐。
未设置高度且align-items:stretch的项目高度为轴体高度，

flex-start:轴体顶部对齐。
flex-end:轴体底部对齐。
center:轴体居中对齐。
space-between:轴体两端对齐，各轴体间距相等
space-around:每个轴体两侧间距相等，轴体间的间距不重叠。
space-evenly:每个轴体两侧间距相等，轴体间的间距不重叠
stretch（默认值）：轴体自动分配空间。

flex-start	flex-end	center

space-between	space-around	space-evenly

组合

// css box设置属性
flex-direction: column;
flex-wrap: wrap;

设置主轴方向自上而下，排不开时换行
没有有设置align-content，所以3个轴体自动分配了宽度
align-items为默认值stretch，3号项目未设置高度，但它并没有填满高度，因为主轴方向改变为自上而下了。只有在align-itmes为stretch，且未设置与主轴轴线方向相反的长度属性时（主轴左右，未设置高度，主轴上下，未设置宽度），项目会填满整个轴体。所以当3号项目未设置宽度时，它会填满轴体

// 添加align-content
align-content: space-evenly;

各轴体间距相同，增加间距，轴体宽度改变，3号项目宽度改变

// 添加align-items
align-items: center;

设置align-items后，3号项目就不再填满轴体了，2、3号项目横向居中，也就是在轴体居中

// 添加justify-content
justify-content: center;

项目纵向居中，即在主轴居中

感谢观看，有时间更新flex布局（二）——项目属性