Flex布局

发布时间：2020-12-15 01:50:16 所属栏目：百科来源：网络整理

导读：一、什么是Flex布局？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 #box{ display: -webkit-flex; /*

一、什么是Flex布局？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

#box{
    display: -webkit-flex; /* Safari */
    display: flex;
    width: 500px;
    height: 300px;
    border: 10px solid red;
}

　采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

二、容器属性

? ? 采用flex布局的容器具有以下六个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

? ? 2.1? ?flex-direction

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

? ? ?row实现代码及展示效果

? ??

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Flex 布局示例</title>
 7     <style>
 8         #box {
 9             display: flex;
10             flex-direction: row;
11             border: 1px solid red;
12             width: 80%
13         }
14 
15         .inner {
16             width: 100px;
17             height: 100px;
18             background: pink;
19             margin: 10px;
20             line-height: 100px;
21             font-size: 50px;
22             text-align: center;
23         }
24     </style>
25 </head>
26 
27 <body>
28     <p></p>
29     <div id="box" class="center">
30         <div class="inner">1</div>
31         <div class="inner">2</div>
32         <div class="inner">3</div>
33         <div class="inner">4</div>
34         <div class="inner">5</div>
35     </div>
36 </body>
37 
38 </html>

View Code

?row-reverse? 实现代码及展示效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Flex 布局示例</title>
 7     <style>
 8         #box {
 9             display: flex;
10             flex-direction: row-reverse;
11             border: 1px solid red;
12             width: 80%
13         }
14 
15         .inner {
16             width: 100px;
17             height: 100px;
18             background: pink;
19             margin: 10px;
20             line-height: 100px;
21             font-size: 50px;
22             text-align: center;
23         }
24     </style>
25 </head>
26 
27 <body>
28     <p></p>
29     <div id="box" class="center">
30         <div class="inner">1</div>
31         <div class="inner">2</div>
32         <div class="inner">3</div>
33         <div class="inner">4</div>
34         <div class="inner">5</div>
35     </div>
36 </body>
37 
38 </html>

View Code

column? 实现代码及展示效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Flex 布局示例</title>
    <style>
        #box {
            display: flex;
            flex-direction: column;
            border: 1px solid red;
            width: 80%
        }

        .inner {
            width: 100px;
            height: 100px;
            background: pink;
            margin: 10px;
            line-height: 100px;
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <p></p>
    <div id="box" class="center">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
    </div>
</body>

</html>

View Code

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!