likes
comments
collection
share

css系列-flex

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

一、概念

1、简介

flex意为“弹性布局”,任何一个容器都可使用flex布局。

2、定义和用法

flex 是以下属性的简写属性:

flex-grow 表示当有剩余空间的时候,分配给项目的比例flex-shrink 表示当空间不足的时候,缩小项目的比例flex-basis 占据主轴的空间

flex 设置的是弹性项目的弹性长度。

3、语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

flex: 1

// 相当于
flex: 0 1 auto

注释:如果元素不是弹性项目,则 flex 属性无效。Internet Explorer 10 以及更早的版本不支持 flex-grow flex-shrink flex-basis 属性。

二、flex用法

1、flex-grow

flex-grow 属性规定在相同的容器中,项目相对于其余弹性项目的增长量,默认值为0(不放大)。

<style>
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

给样式添加了flex-grow后,总宽度为350px,一共有1+3+1+1+1=7个模块,因此可每个div的宽度为50px,而第二个元素占据3个,因此它的宽度为150px。

css系列-flex

2、flex-shrink

flex-shrink 属性固定在相同的容器中,项目相对于其余弹性项目的收缩量,默认值为1。

<style> 
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

#main div:nth-of-type(2) {
  flex-shrink: 3;
}
</style>

<div id="main">
  <div class="v1" style="background-color:coral;"></div>
  <div class="v2" style="background-color:lightblue;"></div>
  <div class="v3" style="background-color:khaki;"></div>
  <div class="v4" style="background-color:pink;"></div>
  <div class="v5" style="background-color:lightgrey;"></div>
</div>

由上述代码可看出总宽度应为100 * 5=500,但是目前的样式宽度为350px,因此空间不足,flex会尽其所能不去改变容器的宽度,而是压缩项目的宽度。

计算逻辑:100为flex-basis的值

溢出空间 = 100 x 5 - 350 = 150总权重 = 100 x 4 x 1 + 100 x 3 = 700v1 = 100 - (150 x 1 x 100) / 700 = 78.572v2 = 100 - (150 x 3 x 100) / 700 = 35.741v3 = v4 = v5 = v1

css系列-flex

如果不想元素被压缩,必须将flex-shrink设为 0。比如v3的flex-shrink=0,则会占据空间100px,剩余空间宽度为250px。

溢出空间 = 100 x 4 - 250 = 150总权重 = 100 x 3 x 1 + 100 x 3 = 600v1 = 100 - (150 x 1 x 100) / 600 = 75v2 = 100 - (150 x 3 x 100) / 600 = 25v4 = v5 = v1

3、flex-basis

flex-basis 属性规定弹性项目的初始长度,如果不设置,则等于内容本身的空间。

<style>
#main {
  width: 300px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 50px;
}

#main div:nth-of-type(2) {
  flex-basis: 100px;
}
</style>

4、思考题

三、容器的属性

1、flex容器属性

容器属性有:

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

2、flex-direction

决定主轴的方向(即项目的排列方向)

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

属性对应如下:

row(默认值):主轴为水平方向,起点在左端row-reverse:主轴为水平方向,起点在右端column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿

如下图所示:css系列-flex

3、flex-wrap

弹性元素永远沿主轴排列,那么如果主轴排不下,通过flex-wrap决定容器内项目是否可换行

.container {  
    flex-wrap: nowrap | wrap | wrap-reverse;
}  

属性对应如下:

nowrap(默认值):不换行wrap:换行,第一行在上方wrap-reverse:换行,第一行在下方默认情况是不换行,但这里也不会任由元素直接溢出容器,会涉及到元素的弹性伸缩

如下图所示:css系列-flex

4、flex-flow

是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

5、justify-content

定义了项目在主轴上的对齐方式

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

属性对应如下:

flex-start(默认值):左对齐flex-end:右对齐center:居中space-between:两端对齐,项目之间的间隔都相等space-around:两个项目两侧间隔相等

如下图所示:css系列-flex

6、align-items

定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

属性对应如下:

flex-start:交叉轴的起点对齐flex-end:交叉轴的终点对齐center:交叉轴的中点对齐baseline: 项目的第一行文字的基线对齐stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

<style>
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  align-items: flex-end;
}

#main div {
  height: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
  
}
</style>

如下图所示:

css系列-flex

7、align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用(需多列才能起作用)

.box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

属性对应如吓:

flex-start:与交叉轴的起点对齐flex-end:与交叉轴的终点对齐center:与交叉轴的中点对齐space-between:与交叉轴两端对齐,轴线之间的间隔平均分布space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍stretch(默认值):轴线占满整个交叉轴

<style>
#main {
  width: 100px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

#main div {
  height: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
  
}
</style>

<div style="background-color:lightblue;width: 100px;"></div>

效果图如下:

css系列-flex

转载自:https://segmentfault.com/a/1190000041462819
评论
请登录