彈性布局

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

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

flex對齊

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

主軸 justify-content

justify-content對齊方式共有5種對齊方式：

flex-start ：主軸起點邊緣開始，從左向右。

flex-end ：主軸終點邊緣開始，從右向左。

center ：主軸中間開始，向兩端伸縮。

space-between：主軸兩端對齊。

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

交叉軸： align-content

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

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

align-items

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

flex-start ：主軸起點。

flex-end ：主軸終點。

center：主軸中間。

stretch ：拉伸。

baseline：基線對齊。

自身對齊方式：align-self

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

flex-start ：交叉軸起點。

flex-end ：交叉軸終點。

center：交叉軸中間。

stretch ：拉伸。

baseline：基線對齊。

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>