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. asp.net core 系列之webapi集成EFCore的简单操作教程

    因为官网asp.net core webapi教程部分,给出的是使用内存中的数据即 UseInMemoryDatabase 的方式, 这里记录一下,使用SQL Server数据库的方式即 UseSql ...

  2. 设计模式 | 建造者模式/生成器模式（builder）

    定义: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 结构:(书中图,侵删) 一个产品类 一个指定产品各个部件的抽象创建接口 若干个实现了各个部件的具体实现的创建类 一个 ...

  3. geopyspark入门

    背景     对于GIS的大数据量实时数据分析和渲染的需求,ArcGIS Server和Geoserver.普通空间数据库往往难以满足,对此我一直感觉很沮丧.这时就要寻求大数据的分布式框架帮助.(Ar ...

  4. Android中对已安装应用的管理实现

    获取.管理手机中已安装的所有应用信息 1.创建应用的实体类AppInfo,属性有应用的名称.包名.图标.第一次安装时间和版本名称 public class AppInfo { private Stri ...

  5. MYSQL 主从复制,读写分离(8)

    Mysql 数据库的主从复制方案,是其自带的功能,并且主从复制并不是复制磁盘上的数据文件,而是通过binlog日志复制到需要同步的服务器上. 一 主从复制的原理实现 原理图解说: 数据库更改 生成数据 ...

  6. ASP.NET Aries 高级开发教程：主题样式及多语言（标签化控制）

    前言: 最新ASP.NET Aries升级到V5.2.0以上之后,之前的样式和多语言机制,有了重大的升级机制,这篇就简单介绍一下. 1.控制开关 在配置维护那里,新增了两个控制项: 2.如何添加主题 ...

  7. Ubuntu 安装php+mysql+nginx

    0x01 安装PHP https://blog.csdn.net/Msmile_my/article/details/73647809   1.添加php的仓库 sudo apt-get instal ...

  8. springcloud之config配置中心-Finchley.SR2版

    本篇和大家分享的是springcloud-config配置中心搭建,写到这里突然想起自己曾今开源过基于Redis发布订阅编写的一个配置中心,刚看了git星数有点少哈哈,这里顺势发个连接欢迎大侠们点赞: ...

  9. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储模式

    前言 1.@LearningCoding 小伙伴关于用Sqlsugar在mysql数据库上的研究成果: sqlsugarcore支持mysql等数据库,在DbContext里面只需要设置dbtype为 ...

  10. 【Netty】（5）源码 Bootstrap

    [Netty]5 源码 Bootstrap 上一篇讲了AbstractBootstrap,为这篇做了个铺垫. 一.概述 Bootstrap 是 Netty 提供的一个便利的工厂类, 我们可以通过它来完 ...