Day11 网页排版好朋友 - Flexbox

Flexbox的组成

Flexbox 是由外容器(flex container)与内元件(flex items)两部份组成，如下图

而外容器与内元件分别有不同的属性，必须了解属性放的位置是在外容器还是内元件，才能避免放错位置，产生不出效果的情况发生。

flex container常用属性有哪些?

display:flex;
flex-direction
justify-content
align-items
flex-wrap

flex items常用属性有哪些?

flex-grow
flex-shrink
flex-basis
align-self
order

flexbox必备属性`display:flex;`

特性:

使内元件并排在flex container内
例如: 未使用display:flex;前，内元件根据本身区块元素的特性会换行

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container{
background-color: pink;
width: 500px;
margin: 0 auto; 
padding: 10px;
}
.item{
width:100px;
background-color:skyblue;
text-align: center;
font-size: 36px;
color:royalblue;
margin:10px;
}

使用display:flex;後，内元件会并排

.container{
display:flex; 
background-color: pink;
width: 500px;
margin: 0 auto; 
padding: 10px;
}

内元件会根据外容器的等比例调整宽度
就算内元件宽度加总超过了外容器宽度，也不会出错

.container{
display:flex; 
background-color: pink;
width: 500px;
margin: 0 auto; 
padding: 10px;
}
.item{
width:300px;
background-color:skyblue;
text-align: center;
font-size: 36px;
color:royalblue;
margin:10px;
}

预设等高

Flexbox的两个轴线 (主轴及交错轴)

1. 主轴(The main axis)

主轴的排列方向是由外容器的flex-direction属性来定义的，有以下四种的排列方式:

flex-direction: row; (预设) 从左到右排列
flex-direction: row-reverse; 从右到左排列
flex-direction: column; 从上到下排列
flex-direction: column-reverse; 从下到上排列

2. 交错轴(The cross axis)

不论主轴的方向怎麽更改，交错轴都会和主轴垂直

参考资料与图片来源:Basic concepts of flexbox

设定内元件在主轴上的排列方式 justify-content

justify-content: flex-start; (预设) 对齐主轴线的起点
justify-content: center; 对齐主轴线中间
justify-content: flex-end; 对齐主轴线的终点
justify-content: space-between;宽度平均分配，第一个和最後一个会贴齐边缘
justify-content: space-around; 宽度和间距平均分配(中间留白较多左右两边留白各占一半空间)
justify-content: space-evenly;左右两边留白一样

设定内元件在交错轴上的排列方式 align-items& align-content(多行)

align-items: flex-start;对齐交错轴线起点
align-items: center;置中对齐交错轴线
align-items: flex-end;对齐交错轴线终点
align-items: stretch; 内元件高度如果没有设定的状态下，是预设的属性
align-items: baseline; 基线(文字的底部)
align-content: start; 多行对齐交错轴线起点
align-content: center;多行置中对齐交错轴线
align-content: space-between; 宽度会平均分配，第一行和最後一行会贴齐边缘
align-content: space-around; 宽度和间距平均分配(中间留白较多左右两边留白各占一半空间)

flex-wrap 设定换行属性

因为设定了display:flex;，内元件就会根据外容器的等比例调整宽度，不会依照内元件设定的宽度改变
设定了flex-wrap就可以让内元件在超出范围时换行排列，而不会被自动调整宽度挤在同一行

flex-wrap: nowrap;(预设) 不换行
flex-wrap: wrap; 换行排列
flex-wrap:wrap-reverse; 换行时反转排列方式

flex flow是flex-direction 和 flex-wrap 的简称，可以使用flex-flow同时设定flex-direction 和flex-wrap
例如:flex-flow:column wrap;
相关资料:flex flow

flex属性

flex 是包含三个属性 flex-grow、flex-shrink 和 flex-basis 的简称
参考资料:flex

1. flex-basis

flex-basis: 内元件的基本大小，预设值为 0，可使用不同的单位值。
参考资料:flex-basis

2. flex-shrink

在外容器空间不够的状态下，使用flex-shrink依比例缩小以适应有限空间

例如:

 <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>


.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:300px;
	flex-shrink: 3;
	background-color: yellow;
	margin: 10px;
	
  }
  
.box1 {
	width:150px;
	flex-shrink: 1;
	background: blue;
	margin: 10px;
  }

.box2{
	width:200px;
	flex-shrink: 2;
	background-color: seagreen;
	margin: 10px;
}

3. flex-grow

在外容器有多余空间时，使用flex-grow分配内元件可在主轴上占外容器的空间比例
未设定时flex-grow，不会将剩余空间分配给内元件做伸展，分配的比例会依照设定的数值进行配置。
例如:

  <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>

.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:100px;
	flex-grow: 1;
	background-color: yellow;
	margin: 10px;
	
  }
  
.box1 {
	width:150px;
	flex-grow: 2;
	background: blue;
	margin: 10px;
  }

.box2{
	width:120px;
	flex-grow: 3;
	background-color: seagreen;
	margin: 10px;
}

参考资料:详解flex-grow与flex-shrink 图解 Flexbox 进阶属性

order改变内元件原有的排列顺序

order是用来定义元件的排列顺序，顺序会依据数值的大小排列。
例如:

  <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>

.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:100px;
	background-color: yellow;
	margin: 10px;
	order:2; 
  }
  
.box1 {
	width:100px;
	background: blue;
	margin: 10px;
	order:3;
  }

.box2{
	width:100px;
	background-color: seagreen;
	margin: 10px;
	order:1;
}