CSS3之伸縮佈局

時間  2019-12-11
標籤 css3 css 伸縮 佈局 欄目 CSS 简体版
原文   原文鏈接

一 主軸方向html

在伸縮佈局中, 默認伸縮項是從左至右的排版的佈局

主軸的排版的方向默認就是row, 默認就是從左至右flex

 1.默認狀況下主軸是水平方向的, 可是也能夠修改成垂直方向.只要看到flex-direction: column/column-reverse就表明主軸被修改成了垂直方向spa

 2.若是將主軸修改成了垂直方向, 那麼側軸就會自動從垂直方向轉換爲水平方向3d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>128-伸縮佈局-主軸方向</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            /*
            在伸縮佈局中, 默認伸縮項是從左至右的排版的
            */
            display: flex;
            /*
            主軸的排版的方向默認就是row, 默認就是從左至右
            */
            /*flex-direction: row;*/
            /*
            修改主軸的排版方向爲從右至左
            */
            /*flex-direction: row-reverse;*/
            /*
            告訴系統把主軸的方向改成垂直方向
            注意點:
            1.默認狀況下主軸是水平方向的, 可是也能夠修改成垂直方向.只要看到flex-direction: column/column-reverse就表明主軸被修改成了垂直方向
            2.若是將主軸修改成了垂直方向, 那麼側軸就會自動從垂直方向轉換爲水平方向
            */
            /*
            修改主軸的排版方向爲從上至下
            */
            flex-direction: column;

            /*
            修改主軸的排版方向爲從下至上
            */
            /*flex-direction: column-reverse;*/
        }
        ul>li{
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            font-size: 35px;
            margin: 20px;
        }
    </style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

二 主軸對齊方式code

 /*
            justify-content:
            用於設置伸縮項主軸上的對齊方式
            若是設置爲flex-start, 表明告訴系統伸縮項和主軸的起點對齊
            */
            justify-content: flex-start;
            justify-content: flex-end;
            /*居中對齊*/
            justify-content: center;
            /*兩端對齊*/
            justify-content: space-between;
            /*環繞對齊*/
            justify-content: space-around;

三 側軸對齊方式htm

ul{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            /*
            經過align-items能夠修改側軸的對齊方式
            默認狀況下是以側軸的起點對齊
            */
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            /*
            注意點:
            和主軸不一樣的是, 側軸沒有兩端對齊和環繞對齊
            */
            /*基線對齊*/
            align-items: baseline;
            /*拉伸對齊*/
            align-items: stretch;

        }

2 blog

若是在伸縮容器中經過 align-items 修改側軸的對齊方式, 是修改全部伸縮項側軸的對齊方式
若是是在伸縮項中經過 align-self 修改側軸的對齊方式, 是單獨修改當前伸縮項側軸的對齊方式
align-self屬性的取值和align-items同樣排序

 ul>li:nth-child(1){
            /*padding-top: 50px;*/
            
            align-self: flex-end;
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            align-self: center;
        }
        ul>li:nth-child(3){
            /*padding-top: 100px;*/
            background-color: yellow;
            align-self: flex-end;
        }

四 主軸側軸的方向問題it

默認狀況下主軸是水平方向, 側軸是垂直方向
默認狀況下主軸的起點在伸縮容器的最左邊, 主軸的終點在伸縮容器的最右邊
默認狀況下側軸的起點在伸縮容器的最頂部, 側軸的終點在伸縮容器的最底部
咱們能夠經過flex-direction屬性修改主軸的方向
若是flex-direction屬性的取值是column/column-reverse
就表明將主軸的方向修改成了垂直方向, 那麼側軸就會馬上變爲水平方向

ul{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
           
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
        }

五 換行問題

在伸縮佈局中, 若是伸縮容器的寬度不夠, 系統會自動壓縮伸縮項的寬度, 保證全部的伸縮想都能放在伸縮容器中
若是當伸縮容器寬度不夠時, 不想讓伸縮項被壓縮, 也可讓系統換行flex-wrap: wrap;

默認狀況下若是伸縮容器的高度比換行以後全部伸縮項的高度還要高, 那麼系統會自動將剩餘空間平分以後添加給每一行

 

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            

            /*寬度不夠也不換行, 默認取值*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
        }
        ul>li{
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }
        ul>li:nth-child(1){

        }
        ul>li:nth-child(2){
            background-color: skyblue;
        }
        ul>li:nth-child(3){
            background-color: yellow;
        }
    </style>

六 換行的對齊方式

1 若是伸縮容器中的伸縮項換行了, 那麼咱們就能夠經過align-content來設置行與行之間的對齊方式

2 默認狀況下換行就是就是拉伸對齊
必定要注意: 在換行中的拉伸對齊是指, 全部行的高度總和要和伸縮容器的高度同樣
因此會將多餘的空間平分以後添加給每一行

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 換行對齊方式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            /*
            若是伸縮容器中的伸縮項換行了, 那麼咱們就能夠經過align-content來設置行與行之間的對齊方式
            */
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            /*
            默認狀況下換行就是就是拉伸對齊
            必定要注意: 在換行中的拉伸對齊是指, 全部行的高度總和要和伸縮容器的高度同樣
            因此會將多餘的空間平分以後添加給每一行
            */
            align-content: stretch;
        }
        ul>li{
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 35px;
        }
        ul>li:nth-child(1){

        }
        ul>li:nth-child(2){
            background-color: skyblue;
        }
        ul>li:nth-child(3){
            background-color: yellow;
        }
    </style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

七 換行的對齊方式

 若是想調整伸縮佈局中伸縮項的順序, 那麼咱們能夠經過修改伸縮項的order屬性來實現

 默認狀況下order的取值是0

 若是咱們設置了order屬性的值, 那麼系統就會按照設置的值從小到大的排序

 

 ul>li:nth-child(1){
            
            order:-1;
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            order: 2;
        }
        ul>li:nth-child(3){
            background-color: yellow;
            order: 1;
        }

八 伸縮項放大比例

1.flex-grow做用:
當全部伸縮項寬度的總和沒有伸縮容器寬度大的時, 咱們能夠經過flex-grow讓系統調整伸縮項的寬度,

以便於讓全部伸縮項的寬度的總和等於伸縮容器的寬度

2.flex-grow計算公式
2.1計算剩餘的空間
伸縮容器寬度 - 全部伸縮項的寬度
400 - 300 = 100
2.2計算每份剩餘空間的寬度
剩餘空間 / 須要的份數
100 / 6 = 16.66
2.3計算每一個伸縮項最終的寬度
伸縮項的寬度 + 須要的份數 * 每份的寬度

注意點:
flex-grow默認值是0，經過公式能夠看出，0 不受影響

ul>li:nth-child(1){
             
            flex-grow: 1;
            /*100 + 1 * 16.66 = 116.66*/
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            flex-grow: 2;
            /*100 + 2 * 16.66 = 133.3*/
        }
        ul>li:nth-child(3){
            background-color: yellow;
            flex-grow: 3;
            /*100 + 3 * 16.66 = 149.8*/
        }

九 伸縮項縮小比例

1.flex-shrink做用:
當全部伸縮項寬度的總和比伸縮容器寬度大的時, 咱們能夠經過flex-shrink讓系統調整伸縮項的寬度, 以便於讓全部伸縮項的寬度的總和等於伸縮容器的寬度

2.計算每一個伸縮項須要壓縮的寬度
2.1計算溢出的寬度
伸縮容器的寬度 - 全部伸縮項的寬度總和
400 - 600 = -200
2.2計算總權重
每一個伸縮項須要的份數 * 每一個伸縮項的寬度
1 * 200 + 2 * 200 + 3 * 200 = 1200
2.3計算每一個伸縮項須要壓縮的寬度
溢出的寬度 * 須要的份數 * 每一個伸縮項的寬度 / 總權重
-200 * 1 * 200 / 1200 = -33.33

注意點:
flex-shrink: 默認值是1 經過公式能夠看出 flex-shrink等於0 的時候不受影響

ul>li:nth-child(1){
             
            flex-shrink: 1;
        }
        ul>li:nth-child(2){
            background-color: skyblue;
            flex-shrink: 2;
        }
        ul>li:nth-child(3){
            background-color: yellow;
            flex-shrink: 3;
        }

十 伸縮項放大縮小比例

若是有伸縮項沒有設置flex-grow, 那麼系統會保持原有的寬度（由於flex-grow默認就是0）
而會將多餘的寬度等分以後, 按照每一個伸縮項須要的份數添加給它們
若是想讓某個伸縮項不縮小, 那麼須要將它的flex-shrink設置爲0（由於flex-shrink默認爲1）

 十一 伸縮項的寬度

若是是伸縮佈局, 除了能夠經過元素的width屬性來設置寬度之外, 還能夠經過flex-basis屬性來設置伸縮項的寬度

注意點:
1.width屬性能夠設置寬度/flex-basis也能夠設置寬度
那麼若是二者同時存在, 系統會聽flex-basis的
2.flex-basis屬性是專門提供給伸縮佈局使用的
3.若是同時經過這兩個屬性設置了寬度, 可是其中一個是auto, 那麼系統會按照具體值來設置 

 ul>li:nth-child(1){
            
            flex-basis: 100px;
            /*width: 200px;*/
            width: auto;
            /*flex-basis: auto;*/
        }

十一 伸縮項屬性簡寫

flex: flex-grow flex-shrink flex-basis;
默認值:
flex: 0 1 auto;

注意點: 在連寫格式中, flex-shrink flex-basis是能夠省略的

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程