页面制作-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: <interger> 相对值

⑵、弹性：

。flex-grow

。flex-shrink

。flex-basis

①flex-basis

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

②flex-grow 伸展因子重要

• flex-grow: <number>
• initial: 0

图片发自简书App

③flex-shrink 收缩因子

• flex-shrink: <number>
• 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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>flex fit layout</title>
    <style>
        html, body{margin: 0;text-align: center;}
        .head, .foot{line-height: 100px;background-color: #000;color: #fff;}
        .side{background-color: yellow;}
        .main{background-color: pink;}


        html, body{height: 100%;}
        body{display: flex;flex-flow: column;}
        .head, .foot{height: 100px;}
        .body{flex: 1;display: flex;}
        .side{width: 200px;}
        .main{flex: 1;}
        /*.main{margin-left: 10px;}*/
        /*.body{width: 960px;align-self: center;}*/ 
    </style>
</head>
<body>
    <div class="head">head</div>
    <div class="body">
        <div class="side">side</div>
        <div class="main">main</div>
    </div>
    <div class="foot">foot</div>
</body>
</html>```

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