文章目录
一、flex布局原理
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式(当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效,当设置flex属性后,盒子将变成横排)
二、父项常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
1.flex-direction 设置主轴的方向
代码如下(示例):
.box{
display: flex;
width: 400px;
height: 200px;
background-color: pink;
/*
*row 默认属性 从左往右
*column 从上往下
*row-reverse 从右往左
*column-reverse 从下往上
*/
flex-direction: column;
}
p{
width: 100px;
height: 100px;
background-color: skyblue;
}
2.justify-content设置主轴上的子元素排列方式
代码如下(示例):
/*
*justify-content
*flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右
*flex-end 从尾部开始排列
*center 在主轴居中对齐(如果主轴是x轴则 水平居中)
*space-around 平分剩余空间
*space-between 先两边贴边 再平分剩余空间(重要)
*/
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
justify-content: space-between;
3.flex-wrap设置子元素是否换行
代码如下(示例):
/*
*flex-wrap: nowrap;默认值 不换行
*flex-wrap: wrap; 换行
*/
flex-wrap: nowrap;
4.align-items设置侧轴上的子元素的排列方式(单行)
代码如下(示例):
/*
*flex-start 默认值 从上到下
*flex-end 从下到上
*center 挤在一起居中(垂直居中)
*stretch 拉伸
*/
align-items: flex-start;
5.align-content设置侧轴上的子元素的排列方式(多行)
代码如下(示例):
/*
*(注意:设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的)
*flex-start 默认值 在侧轴的头部开始排列
*flex-end 在侧轴的尾部开始排列
*center 在侧轴中间显示
*space-around 子项在侧轴平分剩余空间
*space-between 子项在侧轴先分布在两头,再平分剩余空间
*stretch 设置子项元素高度平分父元素高度
*/
align-content: center;
6.align-content 和 align-items 区别
align-items 适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
align-content 适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content
三、子项常见属性
1.flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。
2. align-self 控制子项自己在侧轴上的排列方式
3. order 属性定义项目的排列顺序
1.flex 属性
/*flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。*/
.item {
flex: <number>; /* default 0 */
}
2.align-self 属性
/*align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。*/
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
3.order 属性
/*数值越小,排列越靠前,默认为0。
注意:和 z-index 不一样。
*/
.item {
order: <number>;
}