likes
comments
collection
share

Flex布局

作者站长头像
站长
· 阅读数 35

Flex的含义

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

.box {
    display; flex;
}
.box {
    display; inline-flex;
}

PS: 使用Flex布局,所有子元素的float,clear,vertical-alig你这些属性就会失效

Flex的属性介绍

1.flex-direction:该属性决定主轴的方向,即排列方式,默认row。

.box { 
    flex-direction: row | row-reverse | column | column-reverse; 
}

2.flex-wrap:该属性决定子元素会不会换行,因为默认情况是在一条线上的,默认不换行,nowrap

// nowrap:不换行
// wrap:换行,第一行在上面
// wrap-reverse:换行第一行在下面
.box { 
    flex-wrap: nowrap | wrap | wrap-reverse; 
}

3.flex-flow:该属性flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box { 
    flex-flow: row nowrap; 
}

4.justify-content:改属性定义了子元素在主轴上的对齐方式,默认flex-start

// flex-start: 左对齐
// flex-end:右对齐
// center:居中
// space-between:两端对齐,中间的子元素均匀分布,子元素之间的间距都相同。
// space-around:子元素均匀分布在盒子中,但是子元素两侧都是有间距的,且间距相同,所以,效果是,盒子两端间距是子元素和子元素之间的间距的一半。
.box { 
    justify-content: flex-start | flex-end | center | space-between | space-around:; 
}

5.align-items:该属性是定义子元素在交叉轴上如何对齐,默认stretch

// flex-start:交叉轴的起点对齐。
// flex-end:交叉轴的终点对齐。
// center:交叉轴的中点对齐。
// baseline:子元素的第一行文字的基线对齐。
// stretch:如果子元素未设置高度或设为auto,将占满整个容器的高度。
.box { 
    align-items: flex-start | flex-end | center | baseline | stretch; 
}

6.align-content:改属性是定义多行的对齐方式,如果只有一行,这个属性不起作用,默认stretch

// flex-start:交叉轴的起点对齐。
// flex-end:交叉轴的重点对齐
// center:交叉轴的中点对齐
// space-between:与交叉轴两端对齐,轴线之间的间隔均匀分布
// space-around:每根轴线两侧的间距都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
// stretch:默认占满整个交叉轴,但是每个主轴后面主轴之间有间距,最后一个主轴后面也有间距
.box { 
    align-content: flex-start | flex-end | center | space-between | space-around | stretch; 
}

子元素的属性

1.order:该属性值越小,越靠前,默认为0

.item { 
    order: 0; 
}

2.flex-grow:该属性值代表项目占据的大小(放大),意思是,如果三个子元素,其他两个为1,这个为2的话,代表这个是两位两个的两倍大小,并且会默认撑满这个主轴,但是,如果都是0的话,哪怕没有撑满整个主轴,也不会放大。

.item { 
    flex-grow: 0;
}

3.flex-shrink:该属性代表子元素占据的大小(缩小),默认值为1,不能为负值。如果所有子元素的flex-shrink属性都为1,当空间不足时,都将等比例缩小。但是只要值0,就不会缩小,值越大,越小。

4.flex-basis:该元素定义的话,就是子元素的宽度,默认是auto

5.flex:该属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

6.align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

写在最后

本文在参考阮一峰大佬的Flex讲解,结合自己的理解和语言记录下来的,阮一峰大佬的原文地址如下:

阮一峰大佬的原文