FCC---CSS Flexbox: Use the flex-direction Property to Make a Column
The last two challenges used the flex-direction property set to row.
This property can also create a column by vertically stacking the children of a flex container.
Add the CSS property flex-direction to the #box-container element, and give it a value of column.
<style>
#box-container {
display: flex;
height: 500px;
flex-direction: column;
}
#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>

FCC---CSS Flexbox: Use the flex-direction Property to Make a Column的更多相关文章
- 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 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...
- ValueError: Expecting property name: line 1 column 1 (char 1)
# -*- coding: cp936 -*- #xiaodeng #python 2.7.10 import weibo s='{"name":"xiaodeng&qu ...
- 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条件,触发一 ...
随机推荐
- Java基础-Java基本语法
注释: 1:多行 /* */ 2:单行 // 3:文档 /** */ 基本数据类型: 1:整形 byte(1) short(2) int(4) long(8)(一般申明lo ...
- STM32F103C8T6 在VSCode下使用Platform IO开发,基于库函数V3.5版本
首先安装Platform IO插件,怎么安装的教程有很多,可以自行百度,就不在重复了. 本篇文章将会以正点原子的跑马灯例程作为移植对象,基于ST固件库3.5版本 将实现在VSCode上的程序编写与烧录 ...
- 解决Debina系统自动更新软件包的问题
不知从何时开始,我的电脑每天开机连接上网络之后,不断的在下载数据,状态栏显示网速达到每秒1到2兆.开始我还不太在意,不过后来由于带宽全部被这种莫名其奥妙的下载占据了,我连网页都无否正常浏览了,所以我决 ...
- 【开发工具 - Android Studio】之AndroidStudio使用笔记
一.关闭自动更新: 问题:刚刚安装Android Studio的童鞋可能会遇到这样一个问题:Android Studio在打开的时候一直在下载一些东西,浪费很多时间,而且最终大多都会显示下载失败等等, ...
- mac 下面 vim 编辑器 开启语法高亮
cp /usr/share/vim/vimrc ~/.vimrc 拷贝默认的配置文件 vim ~/.vimrc 编辑该文件 在文件的最后加入 syntax on 保存退出即可
- VMware安装虚拟机及网络配置
首先VMware版本15.1,linux:CentOS7 64位(ISO镜像),准备好这两个就可以开始安装我们的虚拟机了. VMware的安装就不赘述了,这里主要说下怎么在VMware上面安装linu ...
- jenkins 如何让job对应一个节点
1.配置job:如图,在label expression 里面填写[节点标签名]或者是[节点名称]. 2.配置节点: 3.构建:第一个红线,表明使用哪个节点进行构建. 第二个红线,表明工作目录.
- mysql那些事(6) WHERE条件 字符串的引号
前言:所谓的坑,两个意思,一个是软件本身的bug,一个是使用者常犯的错误. phper在日常开发中经常和mysql打交道.特别是在没有分层的中小应用中,phper开发要关注sql语句的实现. 入正题, ...
- 如何将本地项目推送到码云仓库或者GitHub仓库
将本地项目推送到码云仓库. 前提: git 和码云 1.在码云上先创建一个仓库. 2.在要被上传的项目的目录右键, 选择 Git Bash Here. 3.在窗口输入命令: git init 这时 ...
- 拿 C# 搞函数式编程 - 2
前一阵子在写 CPU,导致一直没有什么时间去做其他的事情,现在好不容易做完闲下来了,我又可以水文章了哈哈哈哈哈.顺便成立了自己的专栏:hez2010 的编程日常,欢迎大家关注(逃 有关 FP 的类型部 ...