FLEX布局(弹性布局)
说明
- flex容器(父容器):使用disply:flex
- 项目(子容器):flex容器中的子元素就是项目,不包括孙子元素
- 默认主轴方向时x轴 row 横向
<div class="parent">
<span class="son">
<a class="grandson"></a>
</span>
</div>
父元素常用属性(容器)
- display
- 作用:指定flex
- 取值:flex | inlin-flex
- flex: 讲对象作为弹性伸缩盒子展示,相当于块级元素,有默认宽度100%
- inline-flex:佳能对象作为内联块级弹性伸缩盒子展示,即行内元素,没有默认宽度
// 承接上面代码块继续写
.parent{
display: flex;
}
- flex-direction
- 作用,指定容器的主轴方向,即子元素排列放上,默认是row横向
- 取值:row | row-reverse | column | column-reverse
- row:默认值,子元素横向,在父元素内按照从左向右排列
- row-reverse:子元素横向,在父元素内按照从右向左排列
- column:子元素竖直方向排列,在父元素内按照从上向下排列
- column-reverse:子元素竖直方向排列,在父元素内按照从下向上排列
.parent{
display: flex;
flex-direction: column;
}
- flex-wrap
- 作用:描述如果一个父元素中的子元素排列不下,是否换行,若不换行,则会等比缩小
- 取值:nowrap | wrap | wrap-reverse
- nowrap: 默认不换行,会压缩子元素
- wrap:换行,排不开后的元素换行展示
- wrap-reverse:换行,排不开以后,在前面的元素排到下一行
.parent{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
- flex-flow
- 作用:flex-direction和flex-wrap合并缩写
- 取值:flex-direction | flex-wrap
.parent {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.parent {
display: flex;
flex-flow: column wrap;
}
- justify-content
- 作用:子元素在主轴方向的对齐方式
- 取值:flex-start | flex-end | center | space-between | space-around
- flex-start:默认子元素在父元素主轴开始位置对齐
- flex-end:默认的是子元素在父元素从主轴结束位置对齐
- center:居中对齐,项目形成的总宽度不变
- space-between:两端对齐,中间间隔宽度一样
- space-around:所有项目的两侧间隔相等,主轴两端会留边
.parent {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
- align-items
- 作用:定以辅轴(与主轴垂直的方向)的对齐方式
- 取值:flex-start | flex-end | center | baseline | stretch
- flex-start:辅轴的开始位置对齐
- flex-end:辅轴的结束位置堆砌
- center:辅轴居中
- baseline:基线对齐,文字第一行对齐
- stretch:(单词意思是弹性、拉伸)默认值!!如果项目未设置高度或者设置为auto,将沾满整个容器的高度(自动填充)
.parent {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items:center;
}
- align-content
- 作用定义了辅轴(必须换行的辅轴)的对齐方式
- 说明:如果子元素只有一行,该属性不起作用,如果wrap换行了,那么才有作用
- 取值:flex-start | flex-end | center | space-between | space-around | stretch
- flex-start:所有轴线都是从头开始,辅轴开始位置开始,主轴横轴的话,就是上对齐
- flex-end:从尾开始,辅轴结束位置开始
- center:所有从中间开始
- space-between:多条轴线上下两端对齐
- space-around:多条轴线上下两端分散对齐,上下两侧留白
- stretch:默认!高度自动填充拉伸
.parent {
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
align-content: center;
}
子元素常用的属性
- order
.son{
order: 1;
}
- flex-grow
- 作用:定义子元素的放大比例,默认是0,即如果存在剩余空间,也不放大
- 取值:> 0
- 默认值为0,默认不会自动放大
- 如果都设置为1,那么所有项目会平分剩余的空间
- 如果有三个子元素,一个设置为2,剩余为1,那么项目2的就会占一半,剩下两个会各占四分之一。
- 如果有三个子元素,一个width设置为200,剩余都为1,那么剩余的会平分父元素宽度-200之外的空间
.son{
order: 1;
flex-grow: 2;
}
- flex-shrink
- 作用:定义子元素的缩放比例,和grow相反
- 取值:>0
- 默认值为1,默认会自动缩小
- 如果所有子元素都为1,当空间不足时候,都会等比例缩小
- 如果有一个子元素为0,其他都为1,当空间不足时候,0不变,1都缩小
.son{
order: 1;
flex-shrink: 2;
}
- flex-basis
- 作用:定以分配多余空间之前,子元素占据主轴空间,比width优先级高
- flex
- 作用:flex-grow、flex-shrink、flex-basis的简写
- 默认值:0 1 auto
- align-self
- 作用:允许当前子元素有和其他子元素不一样的对齐方式,可以覆盖父元素的align-items属性
- 取值:比align-items多了个auto
- 默认值为auto,表示继承align-items属性
.son{
order: 1;
flex-shrink: 2;
align-self: center;
}