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;左右两边留白一样
相关资料:justify-content
设定内元件在交错轴上的排列方式 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;宽度和间距平均分配(中间留白较多 左右两边留白各占一半空间)
相关资料:align-content
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;
}
align-self 调整单一内元件交错轴的排列设定
会覆盖掉本来 align-items设定的值，可以个别设定单一元件的值
参考资料: align-self
以上为个人学习笔记整理
若有错误，欢迎指正