页面制作-CSS-布局-flex 2.17/18

1、Flex Terms

图

图片发自App

2、创建 flex container
display:flex

3、flex item
。在文档流中的子元素

图

图片发自App

4、flex：方向、弹性、对齐

⑴、方向：

。flex-direction

。flex-wrap

。flex-flow

。order

①flex-direction: 排列方向
row | row-reverse | column | column-reverse

Paste_Image.png

②flex-wrap: 设置换行
nowrap | wrap | wrap-reverse

③flex-flow: <'flex-direction'> || <'flex-wrap'> 推荐使用

图片发自App

④order: 相对值

⑵、弹性：

。flex-grow

。flex-shrink

。flex-basis

①flex-basis

• flex-basis: main-size |
• 设置flex item的初始宽/高

②flex-grow 伸展因子 重要

• flex-grow:
• initial: 0

图片发自App

③flex-shrink 收缩因子

• flex-shrink:
• initial: 1

④flex

• flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
• initial: 0 1 main-size

3、对齐：

。justify-content

。align-items

。align-self

。align-content

⑴justify-content （类似text-align）

图

图片发自App

⑵align-items 设置在整个容器上（类似 vertical-align）

图片发自App

⑶align-self 设置单个元素

图片发自App

⑷align-content

图

图片发自App

4、布局：三行自适应 + 两行自适应

Paste_Image.png

    
    
    


    
head
    

        
side
        
main
    
    
foot

```

Q1： •怎么用Markdown打出来？？
Q2:如何迅速多行注释？ （sublime-text）
A2：快捷键 Ctrl + /