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;
}