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>Title</title>

    <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;">A</div>

    <div class="box" style="background-color:lightblue;">B</div>

    <div class="box" style="background-color:khaki;">C</div>

    <div class="box" style="background-color:pink;">D</div>

    <div class="box" style="background-color:lightgrey;">E</div>

    <div class="box" style="background-color:lightgreen;">F</div>

</div>

<!-- 从上往下 -->

<div class="flexbox-column">

    <div class="box" style="background-color:coral;">A</div>

    <div class="box" style="background-color:lightblue;">B</div>

    <div class="box" style="background-color:khaki;">C</div>

    <div class="box" style="background-color:pink;">D</div>

    <div class="box" style="background-color:lightgrey;">E</div>

    <div class="box" style="background-color:lightgreen;">F</div>

</div>

<div class="flexbox-row"></div>

<!-- 从右往左 -->

<div class="flexbox-row-reverse">

    <div class="box" style="background-color:coral;">A</div>

    <div class="box" style="background-color:lightblue;">B</div>

    <div class="box" style="background-color:khaki;">C</div>

    <div class="box" style="background-color:pink;">D</div>

    <div class="box" style="background-color:lightgrey;">E</div>

    <div class="box" style="background-color:lightgreen;">F</div>

</div>

<!-- 从下往上 -->

<div class="flexbox-column-reverse">

    <div class="box" style="background-color:coral;">A</div>

    <div class="box" style="background-color:lightblue;">B</div>

    <div class="box" style="background-color:khaki;">C</div>

    <div class="box" style="background-color:pink;">D</div>

    <div class="box" style="background-color:lightgrey;">E</div>

    <div class="box" style="background-color:lightgreen;">F</div>

</div>

</body>

</html>

 

弹性布局--flex方向的更多相关文章

  1. 弹性布局flex

    前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...

  2. 前端入门5-CSS弹性布局flex

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  3. Flutter布局----弹性布局 (Flex)

    弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...

  4. Flutter 布局类组件：弹性布局(Flex)

    前言 弹性布局允许子组件按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现. Flex Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方 ...

  5. 弹性布局Flex的基本语法

    一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( fle ...

  6. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  7. 简单探讨弹性布局flex

    css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...

  8. 弹性布局flex 介绍

    摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  9. 移动端弹性布局--flex

    目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...

随机推荐

  1. 从壹开始前后端分离 41 || Nginx+Github+PM2 快速部署项目(一)

    前言 哈喽大家周一好!今天是农历腊月二十三,小年开始,恭祝大家新年快乐(哈哈你五福了么

  2. hive删除表和表中的数据

    hive删除表和表中的数据,以及按分区删除数据 hive删除表: drop table table_name; hive删除表中数据: truncate table table_name; hive按 ...

  3. Python集成开发环境

    目录 为什么用IDE(了解) Pycharm(掌握) Jupyter(掌握) 为什么用IDE(了解) 到现在为止,我们也是写过代码的人啦,但你有没有发现,每次写代码要新建文件.写完保存时还要选择存放地 ...

  4. 如何使用AWS和Azure的配置存储服务保存读取配置

    原文:Want to yank configuration values from your .NET Core apps? 作者:pauljwheeler 译文:https://www.cnblog ...

  5. 打造自己的Android常用知识体系

    前言 Android常用知识体系是什么鬼?所谓常用知识体系,就是指对项目中重复使用率较高的功能点进行梳理.注意哦,不是Android知识体系. 古语道:学而不思则罔,思而不学则殆.如果将做项目类比为“ ...

  6. [译] PEP 255--简单的生成器

    我正打算写写 Python 的生成器,然而查资料时发现,引入生成器的 PEP 没人翻译过,因此就花了点时间翻译出来.如果在阅读时,你有读不懂的地方,不用怀疑,极有可能是我译得不到位.若出现这种情况,我 ...

  7. js 原型，原型链，原型链继承浅析

    对于网上的关于原型,原型链和原型链继承的晦涩语言说明就不累赘了,复制粘贴过来再解释一遍怕自己也整蒙了,本人最怕空气突然安静,四目对视,大眼对小眼,一脸懵逼. 我们先看下面

  8. 利用requirejs实现vue的模块化开发

    通常vue都是搭配webpack+vue-cli使用的 如果不在nodejs环境下开发web应用呢? 这里提出一个解决方案: 1.加载requirejs,并且指定main函数 <script d ...

  9. C# 4.0 的 Visual Studio 2010 示例

    C# 4.0 的 Visual Studio 2010 示例 我们将 C# 示例分为两种不同的类别: 语言示例 LINQ 示例 语言示例 语言示例帮助您熟悉各种 C# 语言功能.这些示例包含在 Lan ...

  10. 怎么用Mac电脑创建多个桌面

    区别于win的单个桌面,Mac电脑可以设置多个桌面,方面用户处理各种多乱杂的情况.究竟怎么用Mac电脑创建多个桌面呢?一起来看看吧! 1.首先打开Mission Control,点击偏好设置 2.然后 ...