FCC---CSS Flexbox: Use the flex-direction Property to Make a Row
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
.
- <style>
- #box-container {
- display: flex;
- height: 500px;
- flex-direction: row-reverse;
- }
- #box-1 {
- background-color: dodgerblue;
- width: 50%;
- height: 50%;
- }
- #box-2 {
- background-color: orangered;
- width: 50%;
- height: 50%;
- }
- </style>
- <div id="box-container">
- <div id="box-1"></div>
- <div id="box-2"></div>
- </div>
from:
to:
FCC---CSS Flexbox: Use the flex-direction Property to Make a Row的更多相关文章
- CSS Flexbox 学习指南、工具与框架
Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐.虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它. 在本文中,我们整合了一些最佳的 F ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- 【css】display:flex和display:box有什么区别
说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...
- css 13-CSS3属性:Flex布局图文详解
13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...
- Flex布局(CSS Flexbox)
参考:Flex 布局语法教程 Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 注意:设为Fle ...
- [CSS Flex] Flex direction
flex-direction: main two 'row' or 'column', you can use reverse also.
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- CSS: Flexbox
Use flexbox to create a responsive website, containing a flexible navigation bar and flexible conten ...
- CSS#Flex-box, border-size, onresize() event, Media Queries
Flexbox Pseudo-classes box-sizing: border-box HTML DOM event resize() @media Queries: 根据一些css条件,触发一 ...
- css flexbox 弹性布局
flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...
随机推荐
- 【nodejs原理&源码赏析(9)】用node-ssh实现轻量级自动化部署
[摘要] node脚本实现轻量级自动化部署 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 需求描述 前端工程出包后实现简易的自动化部署. 二. ...
- Modelarts与无感识别技术生态总结(浅出版)
[摘要] Modelarts技术及相关产业已成为未来AI与大数据重点发展行业模式之一,为了促进人工智能领域科学技术快速发展,modelarts现状及生态前景成为研究热点.笔者首先总结modelarts ...
- 关于SQL Server 中日期格式化若干问题
select CONVERT(varchar, getdate(), 120 )2004-09-12 11:06:08 select replace(replace(replace(CONVERT(v ...
- shell du sh 文件大小输出
按照文件大小升序输出结果: du -sh * | sort -h 如果要逆序输出,则: du -sh * | sort -hr
- luogu P3572 [POI2014]PTA-Little Bird |单调队列
从1开始,跳到比当前矮的不消耗体力,否则消耗一点体力,每次询问有一个步伐限制,求每次最少耗费多少体力 #include<cstdio> #include<cstring> #i ...
- go基础之并发
1.Goroutines是轻量级线程 2.channels的同步通信 1.Goroutines是轻量级线程 go语句在单独的线程中运行一个函数. 你可以使用go语句启动一个新的执行线程,即一个goro ...
- dotnet core gbk 编码错误解决方案
.Net Core GBK解码 1.添加引用 System.Text.Encoding.CodePages 2.注册 Encoding.RegisterProvider(CodePagesEnco ...
- 第五章 初始jQuery
jQuery与JavaScript: jQuery的用途: 访问和操作DOM元素: 控制页面样式: 对页面事件的处理: 方便地使用jQuery插件: 与Ajax技术的完美结合: jQuery的优势: ...
- 计蒜客-蒜场抽奖(AC自动机+状态压缩DP)
题解:题意不再说了,题目很清楚的. 思路:因为N<=10,所以考虑状态压缩 AC自动机中 val[1<<i]: 表示第i个字符串.AC自动机中fail指针是指当前后缀在其他串里面所能 ...
- 大数据学习笔记——Hive完整部署流程
Hive详细部署教程 此篇博客承接上篇Hadoop和Zookeeper的部署教程,将会详细地对HIve的部署做一个整理,Hive相当于是封装在HDFS和Mapreduce上的一套sql引擎,只需要安装 ...