目录
2.2justify-content 设置主轴上的子元素排列方式
2.3 align-items 设置侧轴上的子元素排列方式（单行）
-
pc端用传统布局
-
移动端或者不考虑兼容性问题的pc端页面，使用flex弹性布局
一、布局原理
flex是flexible Box的缩写，意味“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局
-
当为父盒子设置为flex布局以后，子元素的float，clear，vertical-align属性将失效
-
伸缩布局=弹性布局=伸缩盒布局=flex布局
采用flex布局的元素成为flex容器（flex container），简称“容器”，它的所有子元素自动成为容器成员，称为flex项目
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
-
div相当于容器
-
span相当于子容器/flex项目
-
子容器可以横向排列也可以纵向排列
flex布局就是通过对父盒子添加flex属性，来控制子盒子的位置和排列方式
二、常见父项属性
2.1flex-direction设置主轴的方向
flex布局中，分为主轴和侧轴，或行和列，x轴和y轴
-
默认主轴方向为x轴方向
-
默认侧轴方向为y轴方向
flex-direction属性决定主轴的方向（即项目排列顺序）
主轴和侧轴会变化，取决于flex-direction设置谁为主轴
| 属性值 | 说明 |
|---|---|
| row | 默认从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
2.2justify-content 设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，贴着头开始 |
| flex-end | 贴着尾部开始排列 |
| center | 让子元素居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间 |
2.3 align-items 设置侧轴上的子元素排列方式（单行）
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸（在子盒子没有高度时，沿着侧轴拉伸到和父盒子一样高） |
2.4 flex-wrap 设置子元素换行
当父盒子一行不足以装子盒子此时会改变子盒子宽度，使其一行显示
flex布局中默认子元素不换行
| 属性值 | 说明 |
|---|---|
| no-wrap | 不换行 |
| wrap | 换行，在不改变子盒子之间的距离和盒子大小的前提下父盒子一行装不下时换行 |
2.5 flex-flow
flex-flow是flex-direction和flex-wrap和写的方式
<style>
div {
display:flex;
width:600px;
height:300px;
background-color:pink;
/*换行*/
flex-wrap:wrap;
/*综合写法*/
flex-flow:column wrap;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>三、flex布局子项常见属性
3.1 flex属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
.item {
/*默认为0，flex后天数字*/
flex:<number>;
/*每个孩子分三份*/
flex:3;
}案例：将父盒子平均分三等分，三个孩子各分一份
<style>
p {
display: flex;
width: 60%;
height: 150px;
background-color: cadetblue;
margin: 0 auto;
}
/*子盒子不设置宽度，有三个子盒子，每个子盒子分一份就是三个等份*/
p span {
flex:1;
}
</style>
</head>
<body>
<p>
<span></span>
<span></span>
<span></span>
</p>
</body>3.2 align-self控制子项自己在侧轴上的排列顺序
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认为auto，表示继承父元素align-items属性，没有父元素就等同于stretch
span:nth-child(3){
/*设置自己在侧轴上的排列方式,控制第3个子盒子在侧轴上从下到上排列*/
align-self:flex-end;
}3.3 order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0；
注意：和z-index不一样
例如，让第2个盒子跑到第一个前面,第一个盒子为0，让第二个盒子提到前面必须比0小，设置为-1
span:nth-child(2){
order:-1;
}
2892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
