彈性布局--flex方向

MkkHou 發布于2019-04-23 11:48 / 2847人閱讀

摘要：方向方向由特性決定用于定義彈性布局模式。從左向右主軸水平方向交叉軸垂直方向。從下往上反向注意彈性布局不存在高寬水平垂直等屬性值。不會自己換行的，空間不夠會自動伸縮。從左向右從上往下從右往左從下往上

flex方向

flex方向由flex-direction特性決定,用于定義彈性布局模式。flex-direction共有4種模式：從左向右、從右向左、從上往下、從下往上。

主軸

主軸的起點與終點定義了容器元素的開始和結束邊緣。

交叉軸

交叉軸的起點與終點定義了容器的頂部與底部。

從左向右：flex-direction:row

主軸：水平方向；交叉軸：垂直方向。

從右向左：flex-direction: row-reverse（flex-direction:row的反向）

從上往下：flex-direction: column ?

主軸：垂直方向；交叉軸：水平方向。

從下往上： flex-direction: column-reverse（flex-direction: column反向）

注意：flexbox彈性布局不存在高、寬、水平、垂直等屬性值。盒子模型的大小終于由瀏覽器計算得到。flexbox不會自己換行的，空間不夠會自動伸縮。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }

        .flexbox-row{
            display: flex;
            flex-direction: row;
        }
        .box{
            width: 50px;
            height: 50px;
        }
        .flexbox-column{
            display: flex;
            flex-direction: column;
        }
        .flexbox-row-reverse{
            display: flex;
            flex-direction: row-reverse;
        }
        .flexbox-column-reverse{
            display: flex;
            flex-direction: column-reverse;
        }
    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;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>


<div class="flexbox-column">
    <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;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
<div class="flexbox-row">div>

<div class="flexbox-row-reverse">
    <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;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>


<div class="flexbox-column-reverse">
    <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;">Ddiv>
    <div class="box" style="background-color:lightgrey;">Ediv>
    <div class="box" style="background-color:lightgreen;">Fdiv>
div>
body>
html>

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1185.html

flex基礎布局詳解

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

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

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

luodongseu 2019-08-01 16:29 評論0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也經歷了一段演變歷史。不同于將要出現的網格布局針對目標為大比例布局，彈性盒布局更適用于應用組件和小比例布局。常規布局是基于塊和內聯流方向，而布局是基于流。前言你還在用display+position+float來進行css布局嗎？有沒有覺得用傳統的這種布局方法來實現特殊布局特別麻煩困難，例如：垂直居中。今天來記錄一下自己對flex布局的了解（雖然不算神馬新東西了都可以說是舊東西...

andycall 2019-08-30 13:13 評論0 收藏0
彈性布局示例

摘要：彈性布局背景模塊目前為旨在提供一種更有效的方式來布置，對齊和分配容器中的項目之間的空間，即使其尺寸未知和或動態因此單詞。主軸彈性容器的主軸是彈性項目布局的主要軸子項目默認按照主軸排列。判斷哪個是起始點，主要看彈性布局的流動方向。原文章地址https://css-tricks.com/snippe...根據原文章翻譯并添加自己的理解，有不對的歡迎指正。彈性布局-背景 Flexbox ...

qqlcbb 2019-08-29 15:08 評論0 收藏0
彈性布局示例

摘要：彈性布局背景模塊目前為旨在提供一種更有效的方式來布置，對齊和分配容器中的項目之間的空間，即使其尺寸未知和或動態因此單詞。主軸彈性容器的主軸是彈性項目布局的主要軸子項目默認按照主軸排列。判斷哪個是起始點，主要看彈性布局的流動方向。原文章地址https://css-tricks.com/snippe...根據原文章翻譯并添加自己的理解，有不對的歡迎指正。彈性布局-背景 Flexbox ...

piglei 2019-08-02 10:15 評論0 收藏0
頁面布局 - flex彈性布局

摘要：伸縮項，例如給子容器添加一個所有子容器的默認都為，我們給第一個容器設置為時會產生類似于排序的效果伸縮容器 flex彈性布局 html： *{ margin: 0; padding: 0; ...

liaosilzu2007 2019-08-29 16:59 評論0 收藏0