目录
1.justify-content属性定义了项目在主轴上的对齐方式
3.flex-direction属性决定主轴的方向(即项目的排列方向)
4、flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间
5、flex属性是flex-grow, flex-shrink 和 flex-basis的简写 (子元素属性中最常用)
前言:
传统布局——基于盒子模型,依赖 display 属性、position属性、float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
并且,传统布局代码冗长,出错率高,要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。
Flex布局可以避免这种情况:
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性都将失效!!!
弹性盒子父元素操作使用方法 :
给父元素添加 display: flex;
.box{
display: flex;
}
注意:Webkit 内核的浏览器,必须加上
-webkit
前缀。
Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器属性:记不住的话就结和开发者工具使用
- justify-content属性:定义了项目在主轴上的对齐方式;
- align-items属性:定义项目在交叉轴上如何对齐;
- flex-direction属性:决定主轴的方向(即项目的排列方向);
- flex-wrap属性:规定如果一条轴线排不下,如何换行;
- align-content属性:定义了多根轴线的对齐方式
1.justify-content属性定义了项目在主轴上的对齐方式
- justify-content:flex-start ;(默认值)左对齐
- justify-content:flex-end ; 右对齐
- justify-content:center; 居中
- justify-content:space-between; 两端对齐,项目之间的间隔都相等。
- justify-content:space-around ; 每个项目两侧的间隔相等。
- justify-content:space-evenly; 每个项目两侧间隔相等,项目之间隔比和项目与容器边框的间隔相等
2.align-items属性定义项目在交叉轴上如何对齐
- align-items:flex-start; 交叉轴的起点对齐 居上对齐
- align-items:flex-end; 交叉轴的终点对齐 居下对齐
- align-items:center; 居中对齐
- align-items:baseline; 项目的第一行文字的基线对齐。
- align-items:stretch; 默认值:如果项目未设置高度或设为auto,将占满整个容器的高度。
垂直水平都平均分布方法 :
/* 这两句同时使用可使行列都对齐,但兼容性不好
使用前提是有足够的宽度值与高度值*/
justify-content: space-evenly;
align-content: space-evenly;
举例:
.box {
box-sizing: border-box;
width: 100%;
height: 11rem;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
justify-content: space-evenly;
}
举例:
效果:
3.flex-direction
属性决定主轴的方向(即项目的排列方向)
flex-direction: row;
( 默认值)主轴为水平方向,起点在左端。flex-direction: row-reverse;
主轴为水平方向,起点在右端。flex-direction: column;
主轴为垂直方向,起点在上侧。flex-direction: column-reverse;
主轴为垂直方向,起点在下侧。flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row/nowrap;
4.flex-wrap
属性定义——换行
当容器空间不足时,项目比列缩小
空间有剩余,项目不会变大
flex-wrap:nowrap;
(默认)不换行flex-wrap:wrap;
换行,第一行在上方flex-wrap:wrap-reverse;
换行,第一行在下方
5.align-content属性定义多根轴线的对齐方式
- align-content: flex-start; 项目整体与交叉轴的起点对齐。居上
- align-content: flex-end; 项目整体与交叉轴的终点对齐。居下
- align-content: center; 项目整体与交叉轴的中点对齐。居中
- align-content: space-between; 每两行之间的距离相等。
- align-content: space-around; 每一行两侧的间隔都相等。
- align-content: space-evely; 每两行之间的距离 与 边沿项目距离容器之间的距离相等
- align-content: stretch;(默认值)轴线占满整个交叉轴
弹性盒子内部子元素操作方法
1、order属性定义项目的排列顺序
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0 ,只能是整数
.box .con:nth-of-type(2){
background-color: #0f0;
order: 1;
}
2、flex-grow属性定义项目的放大比例
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
.box .con:nth-of-type(2){
background-color: #0f0;
flex-grow: 2;
}
.box .con:nth-of-type(3){
background-color: #00f;
flex-grow: 1;
}
3
、flex-shrink
属性定义了项目的缩小比例
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.box .con{
width: 200px;
height: 200px;
flex-shrink: 1;
}
4
、flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
它可以设为像
width
或height
属性一样的值(比如350px),则项目将占据固定空间。
5、flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写 (子元素属性中最常用)
flex
属性是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。 (flex:1;
表示子元素占满整个父元素)