CSS_Flex

2019年9月7日 120次阅读 来源: alogy

CSS3 弹性盒子(Flexible Box 或 Flexbox)，弹性框布局，它具有定义一个可伸缩项目的能力。
flex元素可以根据flex-grow因子拉伸以填充可用空间，或根据flex-shrink因子收缩以防止溢出。
当不使用浮动，且弹性容器的外边距也不需要与其内容的外边距合并时，弹性盒子模型比起方框模型要好一些。

基本布局模块：块布局，内联布局，表格布局，定位布局。
使用弹性框布局功能，可以更加轻松地设计复杂网页布局，并且可以在屏幕和浏览器窗口大小发生改变时进行调整以保持元素的相对位置和大小。

flex作用

弹性框可减少对浮动（display属性 + position属性 + float属性）和 表格布局 等各种布局方式的依赖。

flex布局可简化的操作

  1. 构建这样一种布局，即使屏幕和浏览器窗口大小发生改变可灵活调整，但包含彼此的相对位置和大小保持不变的元素。（如图像和控件）

  2. 指定如何沿着一系列元素的水平轴或垂直轴重新分配多余空间，从而增加给定元素的大小。

  3. 指定如何沿着一系列元素的布局轴将多余空间重新分配到一系列元素之前，之后或之间。

  4. 指定如何将某个元素布局轴垂直方向的多余空间。（例如，已并排布局的按钮上方或下方的多余空间） 移动到该元素的周围。

  5. 控制元素在页面上的视觉方向(例如，从上到下，从左到右，从右到左或从下到上),无需调整指定的writing-mode.

  6. 按照不同文档对象模型 （DOM）所指定的排序方式，对屏幕上的元素重新排序。

writing-mode属性：

span {
    width: 100px;
    height: 100px;
    background: chocolate;
    writing-mode: horizontal-tb; /* 默认属性 */
    writing-mode: vertical-lr;  /* 行内元素变为块级元素，垂直显示  左边 */
    writing-mode: vertical-rl;  /* 行内元素变为块级元素，垂直显示  右边 */
}

兼容性

《CSS_Flex》

  1. IOS 可以使用最新的flex布局

  2. android4.4以下，只能兼容旧版的flexbox布局

  3. android4.4及以上，可以使用最新的的flexbox布局

flex布局

任何容器都可以指定flex属性。
要启用弹性框布局，需要首先创建一个弹性容器。弹性容器构成一个包容块，用于容纳其它内容(弹性项目)。
使用display属性将值指定为：flex 或者 inline-flex.设置完Flex属性以后，子元素的float，clear和vertical-align属性将失效

将 display 设置为 flex 会导致元素的行为类似于块级的弹性容器框。块级弹性容器框会占用其父容器的完整宽度。将 display 设置为 inline-flex 会使元素的行为类似于内联级弹性容器框，仅占用其所需的最低空间量，同时也不强加新行。

flex (new)

display: flex;
display: inline-flex;
display: -webkit-flex;

flex (old)

display: -webkit-box;
display: -moz-box;
display: -ms-box;

Container的属性

《CSS_Flex》

采用flex布局的元素，称为flex容器(flex container)，简称”容器”. 它的所有子元素自动成为容器成员，称之为flex项目(flex item), 简称”项目”.

容器默认存在两根轴：水平主轴（main axis）和垂直的交叉轴（cross axis）。
主轴开始的位置（与边框的交叉点）叫做（main start），结束位置叫做（main ned）。
交叉轴的开始位置叫做（cross start）结束位置（cross end）。
项目默认沿着主轴排列。单个项目占据的主轴空间叫做（main size），占据的交叉轴空间叫做（cross size）

6个容器上的属性

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

flex-direction

flex-direction属性决定主轴的方向（即item的排列方向）

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

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

<html>

    <head>
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <style type="text/css">
        #flexContainer { 
          display: flex;
          flex-direction: column;
        } 
        #item1 {
          width: 120px;
          background: #6ABD27;
        }
        #item2 {
          width: 120px;
          background: #00A6EE;
        }
        #item3 {
          width: 120px;
          background: #6ABD27;
        }

    </style>

    <body>

        <div id="flexContainer">
           <div id="item1">1</div>
           <div id="item2">2</div>
           <div id="item3">3</div>
        </div>
        
    </body>

</html>

《CSS_Flex》

order 属性

<html>

    <head>
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <style type="text/css">
        #flexContainer { 
          display: flex;
          flex-direction: column;
        } 
        #item1 {
          width: 120px;
          background:#6ABD27;
          order: 2;
        }
        #item2 {
          width: 120px;
          background:#00A6EE;
          order: 3;
        }
        #item3 {
          width: 120px;
          background:#6ABD27;
          order: 1;
        }

    </style>

    <body>

        <div id="flexContainer">
           <div id="item1">1</div>
           <div id="item2">2</div>
           <div id="item3">3</div>
        </div>
        
    </body>

</html>

《CSS_Flex》

flex-wrap

默认情况下，itme都排在一条线(轴线)上。flex-wrap属性定义，如果一条轴线排列不下，如何换行。

.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap: nowrap;： 默认不换行
flex-wrap: wrap;: 换行第一行在上方
flex-wrap: wrap-reverse;: 换行，第一行在下方.

flex-wrap: nowrap;

《CSS_Flex》

flex-wrap: wrap;

《CSS_Flex》

flex-wrap: wrap-reverse;

《CSS_Flex》

flex-flow

flex-flow属性是flew-direction属性和flex-wrap属性的简写形式.默认值为:row nowrap

.box {
    flex-flow: <flex-dirction> || <flex-wrap>;
}
flex-flow: row-reverse wrap;

同时具有 row-reverse: 主轴为水平方向，起点在右端 和 flex-wrap: wrap: 换行第一行在上方

《CSS_Flex》

justify-content

justify-content属性定义了item 在主轴上的对齐方式.

.box {
    justify-content：flex-start | flex-end | center | space-between | space-around
}

flex-start: 行起始位置对齐。
flex-end: 行结束位置对齐。
space-between: 平均分布，起始位置。
space-around: 平均分布，终点加上自身位置。
center: 向行中间位置对齐。

<html>

    <head>
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <style type="text/css">
        .test div {
            width: 40px;
            height: 30px;
            background: chocolate;
        }
        #flex-start {
            display: flex;
            justify-content: flex-start;
            background: tan;
        }    
        #flex-end {
            display: flex;
            justify-content: flex-end;
            background: tan;
        }
        #space-between {
            display: flex;
            justify-content: space-between;
            background: tan;
        }
        #space-around {
            display: flex;
            justify-content: space-around;
            background: tan;
        }
        #center {
            display: flex;
            justify-content: center;
            background: tan;            
        }
    </style>

    <body>

        <h2>justify-content: flex-start</h2>
        <div id="flex-start" class="test">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
        <h2>justify-content: flex-end</h2>
        <div id="flex-end" class="test">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
        <h2>justify-content: space-between</h2>
        <div id="space-between" class="test">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
        <h2>justify-content: space-around</h2>
        <div id="space-around" class="test">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>        
        
        <h2>justify-content: center</h2>
        <div id="center" class="test">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
    </body>

</html>

《CSS_Flex》

align-items

align-items flex子项在flex容器的当前行侧轴(纵轴)方向上的对齐方式.
对padding影响.

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

flex-start: 与交叉点的起点对齐。
flex-end: 与交叉点的终点对齐。
center: 与交叉点的中点对齐。
space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around: 每根轴线两侧的间隔都相等。
stretch(默认值): 将轴线占满这个交叉轴。

<!DOCTYPE html> 
    <html lang="zh-cmn-Hans"> 
        <head> 
        <meta charset="utf-8" /> 
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style> 
        .test {
            width: 200px;
            height: 70px;
            background: chocolate;
            display: flex;
        }    
        .test div {
            margin: 0 5px;
            border-radius: 5px;
            text-align: center;
            background: tan;
        }
        .test div:nth-child(1) {
            padding: 10px;
        }
        .test div:nth-child(2) {
            padding: 15px 10px;
        }
        .test div:nth-child(3) {
            padding: 20px 10px;
        }
        
        #flex-start {
            align-items: flex-start;
        }
            
        #flex-end {
            align-items: flex-end;
        }
            
        #baseline {
            align-items: baseline;
        }
        
        #stretch {
            align-items: stretch;
        }
        #center {
            align-items: center;
        }
</style>
</head>

<body>
    
    <h2>align-items: flex-start</h2>
    <div id="flex-start" class="test">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    
    <h2>align-items: flex-end</h2>
    <div id="flex-end" class="test">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    
    <h2>align-items: baseline</h2>
    <div id="baseline" class="test">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    
    <h2>align-items: stretch</h2>
    <div id="stretch" class="test">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    
    <h2>align-items: center</h2>
    <div id="center" class="test">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    
</body>

</html>

《CSS_Flex》

align-content

align-content: 属性定义了多根轴线的对齐方式。如果item只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | spce-around | stretch

flex-start: 与交叉轴的起点对齐
flex-end: 与交叉轴的终点对齐
center: 与交叉轴的中点对齐
space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around: 每根轴线两侧的间隔都相等。

Item属性

6个属性设置在Item上。

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

order

order属性定义Item的排列顺序。 数值越小，排列越靠前。 默认为0.

<html>
    <head>
        <title></title>
    </head>
    <style>
        .flexContaier {
            width: 100px;
            height: 100px;
            background: chocolate;
            display: flex;
        }
        
        .flexContaier div {
            height: 30px;
            margin: 0 6px;
            border-radius: 5px;
            background: tan;            
        }
        .flexContaier div:nth-child(1){
            order: 3;
        }
        .flexContaier div:nth-child(2){
            order: 1;
        }
        .flexContaier div:nth-child(3){
            order: 2;
        }
    </style>
    <body>
        
        <div class="flexContaier">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
    </body>
</html>

《CSS_Flex》

flex-grow

flex-grow属性定义Item的放大比例，默认为0，即如果存在剩余空间，也不放大。

子级中的元素将按照比例占满父级的width.
如果所有Item的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。
如果一个Item的flex-grow属性为2，其它Item都未1，则前者占据的剩余空间将比其它多一倍.

<html>
    <head>
        <title></title>
    </head>
    <style>
        .flexContaier {
            width: 100px;
            height: 100px;
            background: chocolate;
            display: flex;
        }
        
        .flexContaier div {
            height: 30px;
            background: tan;    
            margin: 4px;        
        }
        .flexContaier div:nth-child(1){
            flex-grow: 1;
        }
        .flexContaier div:nth-child(2){
            flex-grow: 2;
        }
        .flexContaier div:nth-child(3){
            flex-grow: 1;
        }
    </style>
    <body>
        
        <div class="flexContaier">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
    </body>
</html>

《CSS_Flex》

flex-shrink

flex-shrink属性定义了Item的缩小比例。默认为1，即如果空间不足，该项目将缩小。

负值对该属性无效。

<html>
    <head>
        <title></title>
    </head>
    <style>
        .flexContaier {
            width: 100px;
            height: 100px;
            background: chocolate;
            display: flex;
        }
        
        .flexContaier div {
            width: 40px;
            height: 30px;
            background: tan;    
            margin: 4px;        
        }
        .flexContaier div:nth-child(3){
            flex-shrink: 2;
        }
    </style>
    <body>
        
        <div class="flexContaier">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
    </body>
</html>

《CSS_Flex》

flex-basis

设置

flex-basis: <length> | auto;   /* default auto */

flex-basis属性定义了在分配多余空间之前，Item占据的主轴(main size)。浏览器根据这个属性，计算主轴是否有多余空间。默认为auto，即Item本来的大小。

可以为跟width或height属性一样的值(比如：400px),则Item将占满固定空间。

<html>
    <head>
        <title></title>
    </head>
    <style>
        .flexContaier {
            width: 400px;
            height: 100px;
            background: chocolate;
            display: flex;
        }
        
        .flexContaier div {
            width: 100px;
            height: 30px;
            background: tan;    
            margin: 4px;        
        }
        
        .flexContaier div:nth-child(2){
            flex-basis: 400px;    
            -webkit-flex-basis: 400px;        
        }
        
    </style>
    <body>
        
        <div class="flexContaier">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
    </body>
</html>

《CSS_Flex》

flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex属性是flex-grow,flex-shrink和flex-basis的简写。默认值为： 0 1 auto. 后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

<html>
    <head>
        <title></title>
    </head>
    <style>
        .flexContaier {
            width: 400px;
            height: 100px;
            background: chocolate;
            display: flex;
        }
        
        .flexContaier div {
            width: 100px;
            height: 30px;
            background: tan;    
            margin: 4px;        
            flex: auto;
        }
        
    </style>
    <body>
        
        <div class="flexContaier">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
        
    </body>
</html>

《CSS_Flex》

align-self

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self属性允许单个item有与其它item不一样的对齐方式，可覆盖align-items属性。默认值为auto,标识继承父元素的align-items属性，如果没有父元素，则等同于strecth

该属性可能取6个值，除了auto，其它都与align-items属性完全一致。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>    
    <meta charset="utf-8" />

<style>
    .flexContainer {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: flex-end;
        height: 100px;
        margin: 0;
        padding: 10px;
        border-radius: 5px;
        list-style: none;
        background-color: chocolate;
    }
    
    .flexContainer li {
        margin: 5px;
        padding: 10px;
        border-radius: 5px;
        background: tan;
        text-align: center;
    }
    .flexContainer li:nth-child(1){
        -webkit-align-self: flex-end;
        align-self: flex-end;
    }
    .flexContainer li:nth-child(2){
        -webkit-align-self: center;
        align-self: center;
    }
    .flexContainer li:nth-child(3){
        -webkit-align-self: flex-start;
        align-self: flex-start;
    }
    .flexContainer li:nth-child(4){
        -webkit-align-self: baseline;
        align-self: baseline;
        padding:20px 10px;
    }
    .flexContainer li:nth-child(5){
        -webkit-align-self: baseline;
        align-self: baseline;
    }
    .flexContainer li:nth-child(6){
        -webkit-align-self: stretch;
        align-self: stretch;
    }
    .flexContainer li:nth-child(7){
        -webkit-align-self: auto;
        align-self: auto;
    }

</style>
</head>

<body>
    <ul id="flexContainer" class="flexContainer">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
    </ul>
    
</body>
</html>

《CSS_Flex》

    原文作者：alogy
    原文地址: https://segmentfault.com/a/1190000008040736
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞