Free Code Camp Learning Notes

CSS Flexbox

1.display

in style, define the display as flex will make it flexible and responsive.#box {
display: flex;
}

2.flex-direction: row/column/row-reverse/column-reverse

用于改换元素的排列方向:
#box-container {
display: flex;height: 500px;flex-direction: row-reverse;}
row-reverse会rotate元素的排列
column会变成竖列。

3.justify-content:center/flex-start/flex-end/space-evenly/space-beween/space-around

用于分布flex的元素,start就是都放在一开头,end就是都放在尾部,evenly就是中间均分,around就是每个元素的边距都是一样的, between就是让第一个和最后一个元素分布在两端,剩下的位置均分。
#box-container {
background: gray;display: flex;height: 500px;justify-content: space-between;}

4. align-items

数列方向的平均分配问题
flex-start:所有放在左面;
flex-end:所有放在右边;
center:都放在中间;
stretch: 平均分散,装满containter
baseline:和元素中的文字内容相关,就是以文字为基准线来对齐。

5. flex-wrap

下面这段code,每个box的width都是25%,用flex可以使他们的比例变化,但是如果我们想要保持比例的话,可以把他们wrap起来,如果超过100%比例的部分会自动跳行。
<style>
#box-container {background: gray;display: flex;height: 100%;flex-wrap: wrap;}#box-1 {width: 25%;}#box-2 {width: 25%;}#box-3 {
width: 25%;
}
#box-4{
width: 25%;
}
#box-5{
width: 25%;
}

6.flex-shrink, grow

flex-shrink: 可以在container缩小的情况下按比例缩小内部内容
flex-grow: 可以在container放大的时候按比例放大内部内容,也可以在未设定width的情况下,按照比例显示元素
#box-container {
display: flex;height: 500px;}#box-1 {background-color: dodgerblue;height: 200px;}#box-2 {background-color: orangered;height: 200px;}

7.flex-basis

具体是什么用处不知道
我看就是设定一个基础大小,小于这个的就按比例缩减,大于这个基础值的时候就不再增大了。

8.flex:可以直接使用快捷方法:flex: grow shrink basis

#box-container {display: flex;height: 500px;}#box-1 {background-color: dodgerblue;flex: 2 2 150px; *******这会导致增长也是二倍增长,缩减也是二倍增长height: 200px;}#box-2 {background-color: orangered;flex: 1 1 150px;height: 200px;}

9.order

order可以改变flex元素的排列顺序。
<style>
#box-container {display: flex;height: 500px;}#box-1 {background-color: dodgerblue;order: 2;height: 200px;width: 200px;}

10.align-self

就是独自排列,一般来说align-items会把所有的flex items都按照一定规则排列,然而align-self会单独对某些元素进行align
#box-container {
display: flex;height: 500px;}#box-1 {background-color: dodgerblue;align-self: center;height: 200px;width: 200px;}#box-2 {background-color: orangered;align-self: flex-end;height: 200px;width: 200px;}