彈性布局

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

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

flex對齊

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

主軸 justify-content

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

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

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

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

space-between：主軸兩端對齊。

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

交叉軸： align-content

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

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

align-items

用于單行/單列對齊，沿主軸方向對齊。

flex-start ：主軸起點。

flex-end ：主軸終點。

center：主軸中間。

stretch ：拉伸。

baseline：基線對齊。

自身對齊方式：align-self

用于單行（或單列），沿交叉軸方向對齊。

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>

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/1181.html

flex基礎布局詳解

摘要：系統(tǒng)性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統(tǒng)性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 評論0 收藏0
flex基礎布局詳解

摘要：系統(tǒng)性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統(tǒng)性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

luodongseu 2019-08-01 16:29 評論0 收藏0
說說彈性布局

摘要：占滿交叉軸上所有的空間使用容器定義的的值以上就是我對彈性布局的一些知識點總結，如有異議，煩請告知，謝謝不努力就淘汰彈性布局彈性布局，是一種布局方式主要解決某個元素中子元素的布局方式它為布局提供了強大的靈活性概念和語法基本設置 display: flex; // 將塊級元素設置為容器 display: inline-flex // 將行內元素設置為容器這里出現(xiàn)了容器...

learn_shifeng 2019-08-30 11:07 評論0 收藏0
彈性盒布局

一、彈性布局彈性布局，又稱Flex布局 1、彈性布局的使用給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規(guī)文檔流的顯示方式容器添加彈性布局后，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規(guī)文檔流； display:flex; 容器添加彈性布局后，顯示為塊級元素； display:inline-fle...

whatsns 2019-08-29 16:13 評論0 收藏0
彈性盒布局

一、彈性布局彈性布局，又稱Flex布局 1、彈性布局的使用給父容器添加display: flex/inline-flex;屬性，即可使容器內容采用彈性布局顯示，而不遵循常規(guī)文檔流的顯示方式容器添加彈性布局后，僅僅是容器內容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規(guī)文檔流； display:flex; 容器添加彈性布局后，顯示為塊級元素； display:inline-fle...

leanxi 2019-08-02 11:05 評論0 收藏0