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. 树莓派3b+_32位linux系统arm架构安装JDK

    如图我的Raspbian系统如下图版本信息: 可以看到是armv7l,我查了一下是32位的arm架构,即下载第一个就好了 然后用SSH Secure Shell远程上去把压缩包或者解压后的文件传过去 ...

  2. 【坑】解决CentOS 7.1版本以上安装好zabbix 3.4 无法重启zabbix-server的问题

    1. 问题所在 报错信息:zabbix_server[]: segfault at ip 00007f78842b4bd0 sp 00007fff1995a818 error ] 2. 产生原因 Ce ...

  3. 用C语言做一个横板过关类型的控制台游戏

    前言:本教程是写给刚学会C语言基本语法不久的新生们. 因为在学习C语言途中,往往只能写控制台代码,而还能没接触到图形,也就基本碰不到游戏开发. 所以本教程希望可以给仍在学习C语言的新生们能提前感受到游 ...

  4. C#编写扫雷游戏

    翻看了下以前大学学习的一些小项目,突然发现有个项目比较有意思,觉得有必要把它分享出来.当然现在看来,里面有很多的不足之处,但因博主现在已经工作,没有时间再去优化.这个项目就是利用C#编写一个Windo ...

  5. Vue基本使用

    Vue.js是一款流行的开源JavaScript前端框架,旨在更好地组织与简化Web开发.Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模 ...

  6. Android新手引导库推荐

    本文同步至http://javaexception.com/archives/31 介绍一波新手引导层的库.都是star数挺高的一些库. 1.NewbieGuide(国内开发者开发) Android ...

  7. Activity简介

    声明周期 4种状态 running / paused / stopped / killed 声明周期 activity启动  --->onCreate() -->onStart()---& ...

  8. 一键解决更改计算机名后无法启动MSSQLSERVER服务问题

    问题版本:SQL Server 2012. 解决办法:打开服务,Win + R运行services.msc,找到 SQL SERVER(MSSQLSERVER)服务右键->属性,切换至登录选项卡 ...

  9. 使用CAS实现无锁列队-链表

    #include <stdlib.h> #include <stdio.h> #include <pthread.h> #include <iostream& ...

  10. cglib根据数据动态生成对象

    最近有个任务:根据查询SQL直接导出报表 实现关键是,怎么根据sql查询的数据动态生成对象列表,想到Cglib动态代理实现 废话少说,上代码: 定义动态生成Java Bean类: import jav ...