CSS布局探秘

写在前面
文本流：指相对于文本段落，html文本的显示
文档流：指相对于盒子元素，html文档加载的时候顺序从上到下，从左到右

---

一. display

1. display:inline
   元素和其他的行内元素同处一行，不会独占一行
   不会起作用的设置：(1)height和width,因为根据内容进行适配，所以没用（2）padding和margin的top和bottom设置也没有用，padding和margin的left和right有用
2. display:block
   使元素成为块状元素并且独占一行，如果没有设置宽度，会默认使用父级元素的宽度
   不会起作用的设置：无，不会对margin、padding、height、width等产生影响
3. display:inline-block
   使元素成为块状元素但是不会独占一行，多个块状元素会在同一行里面
   不会起作用的设置：无，不会对margin、padding、height、width等产生影响

注意：
display:inline-block会产生间隙，间隙默认是4像素点，可以在父级元素中添加{font-size:0}消除间隙

4. display: flex
   生成弹性布局
   不会起作用的设置：子元素的float、clear和vertical-align属性
   有一些属性是用于弹性布局的：justify-content、flex-direction、flex-wrap、flex-flow、align-items、align-content

---

二. justify-content. 图用pad画的，实在是有点儿丑:(
justify-content为弹性布局属性，有5个属性可选：
flex-start | flex-end | center | space-between | space-around

1. justify-content: flex-start
   justify-content属性默认为flex-start，表示从该行的起始位置对齐，然后依次平齐
   
2. justify-content: flex-end
   表示从行尾对齐，然后依次平齐
   
3. justify-content: cneter
   表示居中填充
   
4. justify-content: space-between
   表示平均分配，但是如果剩余空间不足，比如为负值或者不到一个弹性框，等同于flex-start。（就是说元素都挤在一起了呗）
   
5. justify-content: space-around
   表示平均分配，两边都有一半的间隔，但是如果剩余空间不足，比如为负值或者不到一个弹性框，等同于center
   

三. flex-direction
属性选项：row | row-reverse | column | column-reverse

四. flex-wrap
属性选项：nowrap | wrap | wrap-revers

五.flex-flow
属性选项：flex-direction || flex-wrap

六.align-items
属性选项： flex-start | flex-end | center | baseline | stretch

七.align-content
属性选项：flex-start | flex-end | center | space-between | space-around | stretch