Adding display: flex to an element turns it into a flex container.

This makes it possible to align any children of that element into rows or columns.

You do this by adding the flex-direction property to the parent item and setting it to row or column.

Creating a row will align the children horizontally, and creating a column will align the children vertically.

Other options for flex-direction are row-reverse and column-reverse.

Note: The default value for the flex-direction property is row.


Add the CSS property flex-direction to the #box-container element, and give it a value of row-reverse.


  1. <style>
  2. #box-container {
  3. display: flex;
  4. height: 500px;
  5. flex-direction: row-reverse;
  6. }
  7. #box-1 {
  8. background-color: dodgerblue;
  9. width: 50%;
  10. height: 50%;
  11. }
  12.  
  13. #box-2 {
  14. background-color: orangered;
  15. width: 50%;
  16. height: 50%;
  17. }
  18. </style>
  19.  
  20. <div id="box-container">
  21. <div id="box-1"></div>
  22. <div id="box-2"></div>
  23. </div>

from:

to:

FCC---CSS Flexbox: Use the flex-direction Property to Make a Row的更多相关文章

  1. CSS Flexbox 学习指南、工具与框架

    Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐.虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它. 在本文中,我们整合了一些最佳的 F ...

  2. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  3. 【css】display:flex和display:box有什么区别

    说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...

  4. css 13-CSS3属性:Flex布局图文详解

    13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...

  5. Flex布局(CSS Flexbox)

    参考:Flex 布局语法教程 Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 注意:设为Fle ...

  6. [CSS Flex] Flex direction

    flex-direction: main two 'row' or 'column', you can use reverse also.

  7. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  8. CSS: Flexbox

    Use flexbox to create a responsive website, containing a flexible navigation bar and flexible conten ...

  9. CSS#Flex-box, border-size, onresize() event, Media Queries

    Flexbox Pseudo-classes box-sizing: border-box HTML DOM event  resize() @media Queries: 根据一些css条件,触发一 ...

  10. css flexbox 弹性布局

    flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...

随机推荐

  1. 【nodejs原理&源码赏析(9)】用node-ssh实现轻量级自动化部署

    [摘要] node脚本实现轻量级自动化部署 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 需求描述 前端工程出包后实现简易的自动化部署. 二. ...

  2. Modelarts与无感识别技术生态总结(浅出版)

    [摘要] Modelarts技术及相关产业已成为未来AI与大数据重点发展行业模式之一,为了促进人工智能领域科学技术快速发展,modelarts现状及生态前景成为研究热点.笔者首先总结modelarts ...

  3. 关于SQL Server 中日期格式化若干问题

    select CONVERT(varchar, getdate(), 120 )2004-09-12 11:06:08 select replace(replace(replace(CONVERT(v ...

  4. shell du sh 文件大小输出

    按照文件大小升序输出结果: du -sh * | sort -h 如果要逆序输出,则: du -sh * | sort -hr

  5. luogu P3572 [POI2014]PTA-Little Bird |单调队列

    从1开始,跳到比当前矮的不消耗体力,否则消耗一点体力,每次询问有一个步伐限制,求每次最少耗费多少体力 #include<cstdio> #include<cstring> #i ...

  6. go基础之并发

    1.Goroutines是轻量级线程 2.channels的同步通信 1.Goroutines是轻量级线程 go语句在单独的线程中运行一个函数. 你可以使用go语句启动一个新的执行线程,即一个goro ...

  7. dotnet core gbk 编码错误解决方案

    .Net Core GBK解码 1.添加引用 System.Text.Encoding.CodePages 2.注册   Encoding.RegisterProvider(CodePagesEnco ...

  8. 第五章 初始jQuery

    jQuery与JavaScript: jQuery的用途: 访问和操作DOM元素: 控制页面样式: 对页面事件的处理: 方便地使用jQuery插件: 与Ajax技术的完美结合: jQuery的优势: ...

  9. 计蒜客-蒜场抽奖(AC自动机+状态压缩DP)

    题解:题意不再说了,题目很清楚的. 思路:因为N<=10,所以考虑状态压缩 AC自动机中 val[1<<i]: 表示第i个字符串.AC自动机中fail指针是指当前后缀在其他串里面所能 ...

  10. 大数据学习笔记——Hive完整部署流程

    Hive详细部署教程 此篇博客承接上篇Hadoop和Zookeeper的部署教程,将会详细地对HIve的部署做一个整理,Hive相当于是封装在HDFS和Mapreduce上的一套sql引擎,只需要安装 ...