CSS3 弹性盒子属性解析

逃离我推掉我的手 2022-12-29 09:18 138阅读 0赞

## 1、CSS3 弹性盒子(Flex Box) ##

*  弹性盒子是 CSS3 的一种新的布局模式。
 *  CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
 *  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
 *  传统的布局方案，基于css盒子模型，float+display+position，对于很多特殊布局方案就非常不方便

--------------------

#  #

## 2、CSS3 弹性盒子内容 ##

*  弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
 *  弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
 *  弹性容器内包含了一个或多个弹性子元素。
 *  **注意：** 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
 *             弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

--------------------

## 3、flex-direction属性 ##

**`flex-direction`** 属性指定了弹性子元素在父容器中的位置。

### 语法 ###

flex-direction: row | row-reverse | column | column-reverse

### `flex-direction`的值有: ###

*  row：横向从左到右排列（左对齐），默认的排列方式。
 *   
 *  row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
 *  实例：
    
        
        
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>flex-direction</title>
            <style>
              
                
                .father {
                    width: 400px;
                    height: 400px;
                    margin: 0 auto;
                    margin-top: 50px;
                    border: 1px solid springgreen;
                    display: flex;
                    flex-direction: row-reverse;
                    
                }
                
                .son {
                    width: 100px;
                    height: 100px;
                    background-color: blueviolet;
                    margin-left: 5px;
                }
            </style>
        </head>
        
        <body>
            <div class="father">
                <div class="son">1</div>
                <div class="son">2</div>
                <div class="son">3</div>
            </div>
            <div class="father1">
                <div class="son1">1</div>
                <div class="son1">2</div>
                <div class="son1">3</div>
            </div>
        </body>
        
        </html>
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]
 *  column：纵向排列。
 *  实例：
    
        
        
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>flex-direction</title>
            <style>
               
                
                .father {
                    width: 400px;
                    height: 400px;
                    margin: 0 auto;
                    margin-top: 50px;
                    border: 1px solid springgreen;
                    display: flex;
                    flex-direction: column;
                }
                
                .son {
                    width: 100px;
                    height: 100px;
                    background-color: blueviolet;
                    margin-left: 5px;
                }
            </style>
        </head>
        
        <body>
            <div class="father">
                <div class="son">1</div>
                <div class="son">2</div>
                <div class="son">3</div>
            </div>
            <div class="father1">
                <div class="son1">1</div>
                <div class="son1">2</div>
                <div class="son1">3</div>
            </div>
        </body>
        
        </html>
        
        
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][]
 *  column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
 *  实例：
    
        
        
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>flex-direction</title>
            <style>
                .father {
                    width: 400px;
                    height: 400px;
                    margin: 0 auto;
                    margin-top: 50px;
                    border: 1px solid springgreen;
                    display: flex;
                    flex-direction: column;
                }
                
                .son {
                    width: 100px;
                    height: 100px;
                    background-color: blueviolet;
                    margin-left: 5px;
                }
            </style>
        </head>
        
        <body>
            <div class="father">
                <div class="son">1</div>
                <div class="son">2</div>
                <div class="son">3</div>
            </div>
            <div class="father1">
                <div class="son1">1</div>
                <div class="son1">2</div>
                <div class="son1">3</div>
            </div>
        </body>
        </html>
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2][]

--------------------

## 4、**flex-wrap属性** ##

**flex-wrap 属性用于指定弹性盒子的子元素换行方式。**

### 语法 ###

flex-wrap: nowrap| wrap |wrap-reverse| initial | inherit;

各个值解析:

*  **nowrap** \- 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
 *  实例：
    
        <style>
        	div{
        		display: flex;
        		border: 1px solid #000;
        		flex-direction: row;
        		flex-wrap: nowrap;
        	}
        	p{
        		border: 1px solid red;
        		width: 100px;
        		height: 100px;
        		line-height: 100px;
        		text-align: center;
        		margin-left: 20px;
        	}
        </style>
        <body>
        <div>
        	<p>1</p>
        	<p>2</p>
        	<p>3</p>
        	<p>4</p>
        	<p>5</p>
        	<p>6</p>
        	<p>7</p>
        	<p>8</p>
        </div>
        </body>
    
    ![20201221201158249.png][]
 *  **wrap** \- 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
 *  实例：
    
        <!DOCTYPE html>
        <html>
        
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .flex-container {
                    display: -webkit-flex;
                    display: flex;
                    flex-wrap: wrap;
                    width: 300px;
                    height: 250px;
                    background-color: lightgrey;
                }
                
                .flex-item {
                    background-color: cornflowerblue;
                    width: 100px;
                    height: 100px;
                    margin: 10px;
                }
            </style>
        </head>
        
        <body>
        
            <div class="flex-container">
                <div class="flex-item"> item 1</div>
                <div class="flex-item">item 2</div>
                <div class="flex-item"> item 3</div>
            </div>
        
        </body>
        
        </html>
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3][]
 *  **wrap-reverse** \-反转 wrap 排列。
 *  实例：
    
        <!DOCTYPE html>
        <html>
        
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .flex-container {
                    display: flex;
                    flex-wrap: wrap-reverse;
                    width: 300px;
                    height: 250px;
                    background-color: lightgrey;
                }
                
                .flex-item {
                    background-color: cornflowerblue;
                    width: 100px;
                    height: 100px;
                    margin: 10px;
                }
            </style>
        </head>
        
        <body>
        
            <div class="flex-container">
                <div class="flex-item"> item 1</div>
                <div class="flex-item">item 2</div>
                <div class="flex-item"> item 3</div>
            </div>
        
        </body>
        
        </html>
    
    ![20201221201859828.png][]
    
    --------------------
    
    ## 5、justify-content 属性 ##
    
    内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
    
    justify-content 语法如下：
    
        justify-content: flex-start | flex-end | center | space-between | space-around
    
    各个值解析:
 *  **flex-start：**
    
    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
 *  **flex-end：**
    
    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
 *  **center：**
    
    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
 *  **space-between：**
    
    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
 *  **space-around：**
    
    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2\*20px=10px）。

**对比图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 4][]**

--------------------

## 6、align-items 属性 ##

`align-items` 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

### 语法 ###

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

*  flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
 *  flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
 *  center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
 *  baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
 *  stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

--------------------

## 7、align-content 属性 ##

`align-content` 属性用于修改 `flex-wrap` 属性的行为。类似于 `align-items`, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

### 语法 ###

各个值解析:

*  `stretch` \- 默认。各行将会伸展以占用剩余的空间。
 *  `flex-start` \- 各行向弹性盒容器的起始位置堆叠。
 *  `flex-end` \- 各行向弹性盒容器的结束位置堆叠。
 *  `center` \-各行向弹性盒容器的中间位置堆叠。
 *  `space-between` \-各行在弹性盒容器中平均分布。
 *  `space-around` \- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

--------------------

## 8、弹性子元素属性 ##

### 排序 ###

### 语法 ###

order:

各个值解析:

*  <integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

### `order` 属性设置弹性容器内弹性子元素的属性: ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>flex-direction</title>
        <style>
            .father {
                width: 400px;
                height: 400px;
                margin: 0 auto;
                margin-top: 50px;
                border: 1px solid springgreen;
                display: flex;
                flex-direction: row;
            }
            
            .son {
                width: 100px;
                height: 100px;
                background-color: blueviolet;
                margin-left: 5px;
            }
            
            .son:nth-child(3) {
                order: -2;
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="son">1</div>
            <div class="son">2</div>
            <div class="son">3</div>
        </div>
    
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 5][]

--------------------

## 9、align-self属性 ##

`align-self` 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

### 语法 ###

各个值解析:

*  auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
 *  flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
 *  flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
 *  center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
 *  baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
 *  stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

--------------------

## 10、对齐 ##

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

**完美的居中**

以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只想要设置 `margin: auto;` 可以使得弹性子元素在两上轴方向上完全居中:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .big-box {
                width: 800px;
                height: 800px;
                display: flex;
                border: 1px solid springgreen;
            }
            
            .box {
                width: 200px;
                height: 200px;
                background-color: brown;
                margin: auto;
            }
        </style>
    </head>
    
    <body>
        <div class="big-box">
            <div class="box">我是完美居中的</div>
        </div>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 6][]

--------------------

## 11、flex属性 ##

`flex` 属性用于指定弹性子元素如何分配空间。

### 语法 ###

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各个值解析:

*  auto: 计算值为 1 1 auto
 *  initial: 计算值为 0 1 auto
 *  none：计算值为 0 0 auto
 *  inherit：从父元素继承
 *  \[ flex-grow \]：定义弹性盒子元素的扩展比率。
 *  \[ flex-shrink \]：定义弹性盒子元素的收缩比率。
 *  \[ flex-basis \]：定义弹性盒子元素的默认基准值。

以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .flex-container {
                display: -webkit-flex;
                display: flex;
                width: 400px;
                height: 250px;
                background-color: lightgrey;
            }
            
            .flex-item {
                background-color: green;
                margin: 10px;
            }
            
            .item1 {
                flex: 2;
            }
            
            .item2 {
                flex: 1;
            }
            
            .item3 {
                flex: 1;
            }
        </style>
    </head>
    
    <body>
    
        <div class="flex-container">
            <div class="flex-item item1"> item 1</div>
            <div class="flex-item item2"> item 2</div>
            <div class="flex-item item3"> item 3</div>
        </div>
    
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/8fe79837cec841739669035bbccbc60d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: /images/20221120/87497af3b71944e48f4d525b33cc3344.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2]: /images/20221120/564958e65f4c475eb1b56983aa2a4c99.png
[20201221201158249.png]: /images/20221120/706980864a6a42b0801d383b24c831c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3]: /images/20221120/934de16e696e43cfbcb38b79d6374cf7.png
[20201221201859828.png]: /images/20221120/d5b2d7fe21d1419fbdcb69d7ae31f631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 4]: /images/20221120/70979eeee18c4feaa4c3577b82ca4e66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 5]: /images/20221120/04bc2371734c47b387b8cf9780ab6cab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 6]: /images/20221120/de7af7693991403a842e65b8736c0441.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 7]: /images/20221120/cdf6d292842d47e39a2a8d5a29189cdd.png