flex布局=伸缩布局
解析：任何容器都可以使用flex布局方式，通过给父元素设置flex属性，来控制子盒子的位置和排列方式。
flex-给父亲元素的常见属性
1. flex-direction:row; 主轴为x轴 子盒子从左往右排列（默认为x轴）
2. flex-direction: column; 主轴为y轴 子盒子从上往下排列
3.设置主轴上的子元素排列方式
justify-content：flex-start ;=设置子盒子在主轴上开始的地方排列
justify-content: flex-end ;=设置子盒子在主轴上结尾的地方排列
justify-content: center;= 让子盒子沿主轴方向水平居中
justify-content: space-around;=子盒子在主轴方向平均分配剩余的空间（空白区域分给子项目环绕）
justify-content: space-between;= 让在主轴上的子盒子 先两边贴边 剩余的空间再平分
4.设置侧轴上的子元素排列方式
align-items 子元素单行
align-items:start;=设置子盒子在侧轴上开始的地方排列
align-items: end;=设置子盒子在侧轴上结尾的地方排列
align-items: center;= 让子盒子沿侧轴方向水平居中
align-items: stretch;=拉伸效果，子盒子不能设置高度
5.flex布局中，默认的子元素是不会换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
flex-wrap: wrap;=换行
flex-wrap: wrap-reverse;=反方向换行
6. align-content 子元素多行
align-content: flex-start;=设置子盒子在侧轴上开始的地方排列
align-content: flex-end;=设置子盒子在侧轴上结尾的地方排列
align-content: center;=让子盒子沿侧轴方向水平居中
align-content: space-around;=子盒子在侧轴上平均分配剩余的空间/空白区域分给子项目环绕
align-content: space-between;=让在侧轴上的子盒子 先两边贴边 剩余的空间再平分
复合写法
1. flex-direction: column;=设置主轴为y轴
2. flex-wrap: wrap;=换行
复合flex-flow: column wrap;
flex-给子元素的常见属性
1.flex属性定义子元素，分配剩余的空间，用flex来表示占多少份数。
语法：flex：1;
<style>
.box {
display:flex;
width: 300px;
height: 300px;
background-color: pink;
}
p:nth-child(2) {
width: 100px;
height: 100px;
background-color: green;
第二个p占父容器的2份位置
flex: 2;
}
</style>
<body>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
2.align-self 控制子项自己在（侧轴上/交叉轴)的排列方式 允许单个子元素不一样的对齐方式，
(align-self属性覆盖父元素align-items属性)。
属性值：
align-self:flex-start;=子元素水平顶端对齐
align-self:flex-end;=水平底端对齐 柱状图
align-self: center;=子元素居中对齐
3. order 属性定义子元素的排列顺序 数值越小，排列越靠前，默认为0。
例如：
<style>
div {
display: flex;
width: 600px;
height: 300px;
background-color: pink;
}
div span {
width: 100px;
height: 100px;
background-color: green;
margin-left: 10px;
}
div span:nth-child(2) {
/* 默认值为0 -1比零小所以在前面 */
order: -1;
}
/* 让第三个孩子自己在侧轴上底端对齐 */
div span:nth-child(3) {
align-self: flex-end;
}
</style>
<body>
<div>
<span>孩子1</span>
<span>孩子2</span>
<span>孩子3</span>
</div>
</body>
2509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
