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. MySQL数据同步，出现Slave_SQL_Running：no和slave_io_running：no问题的解决方法

    一.问题描述: 当我们配置好MySQL主主同步时,是可以实现主主同步,但是重启机器后就发现无法同步了. 二.Slave两个关键进程: mysql replication 中slave机器上有两个关键的 ...

  2. ASP.NET Core 实战：使用 Docker 容器化部署 ASP.NET Core + MySQL + Nginx

    一.前言 在之前的文章(ASP.NET Core 实战:Linux 小白的 .NET Core 部署之路)中,我介绍了如何在 Linux 环境中安装 .NET Core SDK / .NET Core ...

  3. DDD领域驱动设计理论篇 - 学习笔记

    一.Why DDD? 在加入X公司后,开始了ASP.NET Core+Docker+Linux的技术实践,也开始了微服务架构的实践.在微服务的学习中,有一本微软官方出品的<.NET微服务:容器化 ...

  4. 你用.NET开发APP时，在云平台打包APP要填个“包名”的含义

    ios 在ios平台,包名有它专有的名词:bundle ID.bundle ID可以翻译成包ID,也可以叫APP ID或者应用ID,他是每一个ios应用的全球唯一标识,只要bundle id不变,无论 ...

  5. 企业移动应用和Smobiler

    www.smobiler.com     什么是企业移动应用?     能够通过一种方式来为客户.合作伙伴和员工交付信息和服务,从而帮助其增加收入,提高业务敏捷性和生产力的移动端产品,我们称之为企业移 ...

  6. MD5加密Util

    目录 (1)需要导入的包 (2)MD5Util类 (3)使用举例 (1)需要导入的包 <dependency> <groupId>org.apache.commons</ ...

  7. 【IIS】解决IIS无响应假死状态，asp突然无法访问重启后可以使用是什么原因

    在IIS6下,经常出现w3wp的内存占用不能及时释放,从而导致服务器响应速度很慢. 可以做以下配置:1.在IIS中对每个网站进行单独的应用程序池配置.即互相之间不影响.2.设置应用程序池的回收时间,默 ...

  8. 关于'selffilter' is not a registered tag library. Must be one of:

    报错代码: 'selffilter' is not a registered tag library. Must be one of: admin_list admin_modify admin_st ...

  9. 数据库MySQL(课下作业)

    一.作业要求 下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/6371315.html#SECDB,导入world.sql,提交导入成功截 ...

  10. MySQL学习（四）Join 等开发常用的操作 --- 2019年2月

    1.查数据太多不会把内存用光 InnoDB 的数据是保存在主键索引上,然后索引树分割保存在数据页上,数据页存在内存中/磁盘.change buffer 就是先把修改操作记录,然后读数据的时候,内存没有 ...