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. 使用蓝图构建Flask项目目录

    蓝图构建项目目录 什么是蓝图 一个应用中或跨应用制作应用组件和支持通用的模式 蓝图的作用 将不同的功能模块化 构建大型应用 优化项目结构 增强可读性,易于维护 蓝图构建项目目录 定义蓝图 app/ad ...

  2. 基于Docker快速搭建ELK

    [摘要] 本文基于自建的Docker平台速搭建一套完整的ELK系统,相关的镜像直接从Docker Hub上获取,可以快速实现日志的采集和分析检索. 准备镜像 l  获取ES镜像:docker pull ...

  3. Hyperledger Fabric 动态增加组织到网络中

    本文基于Hyperledger Fabric 1.4版本. 官方文档地址:传送门 动态添加一个组织到Fabric网络中也是一个比较重要的功能.官方文档写的已经很详细了,有能力的尽量还是看官方文档,本文 ...

  4. luogu P2640 神秘磁石

    题目描述 1.若给他一个一维坐标系,那么他的磁力一定要在素数坐标的位置上才能发挥的最大(不管位置坐标的大小,只要是素数那么磁力就一样大) 2.若两个磁石相距为k,那么磁石间的破坏力将会达到当前磁力的峰 ...

  5. Python抓取豆瓣电影top250!

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:404notfound  一直对爬虫感兴趣,学了python后正好看到 ...

  6. 【Git】405- 分享:大牛总结的 Git 使用技巧

    作者:你喜欢吃青椒么 来源:juejin.im/post/5d157bf3f265da1bcc1954e6 前言 本文是参考廖雪峰老师的Git资料再加上我自己对Git的理解,记录我的Git学习历程,作 ...

  7. 【Eclipse】Spring Tool Suite插件

    Spring Tool Suite插件 最新下载地址:https://spring.io/tools3/sts/all 以前下载地址:https://spring.io/tools3/sts/lega ...

  8. 带你快速了解Java锁中的公平锁与非公平锁

    前言 Java语言中有许多原生线程安全的数据结构,比如ArrayBlockingQueue.CopyOnWriteArrayList.LinkedBlockingQueue,它们线程安全的实现方式并非 ...

  9. tabhost改变标签颜色

    package uiframe.zyx.uiframe.com.uiframe.fragments;import android.os.Bundle;import android.support.an ...

  10. android studio 代码问题总结

    1,android studio隐藏title时,用eclipse里面的方法不行,所以用下面的代码解决,此代码需要写在 加载xml文件之后 getSupportActionBar().hide(); ...