彈性布局

番茄西紅柿發(fā)布于2019-04-23 11:48 / 3021人閱讀

摘要：對(duì)齊對(duì)齊方式與主軸和交叉軸所在的方向有關(guān)而是控制方向的。主軸對(duì)齊方式共有種對(duì)齊方式主軸起點(diǎn)邊緣開(kāi)始，從左向右。各行將會(huì)伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)，該值等效于。在其它情況下，剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸。

flex對(duì)齊

flex對(duì)齊方式與主軸和交叉軸所在的方向有關(guān),而flex-direction是控制方向的。

主軸 justify-content

justify-content對(duì)齊方式共有5種對(duì)齊方式：

flex-start ：主軸起點(diǎn)邊緣開(kāi)始，從左向右。

flex-end ：主軸終點(diǎn)邊緣開(kāi)始，從右向左。

center ：主軸中間開(kāi)始，向兩端伸縮。

space-between：主軸兩端對(duì)齊。

space-around ：與space-between區(qū)別就是起始端與結(jié)束端間隔相等。

交叉軸： align-content

align-content對(duì)齊方式共有6種。除了與justify-content前5種方式一樣外，多了一種stretch對(duì)齊方式。

stretch：各行將會(huì)伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)，該值等效于flex-start。在其它情況下，剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸。

align-items

用于單行/單列對(duì)齊，沿主軸方向?qū)R。

flex-start ：主軸起點(diǎn)。

flex-end ：主軸終點(diǎn)。

center：主軸中間。

stretch ：拉伸。

baseline：基線(xiàn)對(duì)齊。

自身對(duì)齊方式：align-self

用于單行（或單列），沿交叉軸方向?qū)R。

flex-start ：交叉軸起點(diǎn)。

flex-end ：交叉軸終點(diǎn)。

center：交叉軸中間。

stretch ：拉伸。

baseline：基線(xiàn)對(duì)齊。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .box{
            width: 50px;
            height: 50px;
        }
        .flexbox-row{
            margin: 50px auto;
            display: flex;
            flex-direction: row;
            width: 120px;
            height: 320px;
            border: 1px #ccc solid;
            flex-wrap: wrap;
            /**
                左上角
                justify-content: flex-start;
                align-content: flex-start;

                左下角
                justify-content: flex-start;
                align-content: flex-end;

                右上角
                justify-content: flex-end;
                align-content: flex-start;
             */
            justify-content: flex-end;
            align-content: flex-end;
        }
    style>
head>
<body>

<div class="flexbox-row">
    <div class="box" style="background-color:coral;">Adiv>
    <div class="box" style="background-color:lightblue;">Bdiv>
    <div class="box" style="background-color:khaki;">Cdiv>
    <div class="box" style="background-color:pink;align-self: flex-start;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
<script>

script>
body>
html>