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的更多相关文章

  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. ValueError: Expecting property name: line 1 column 1 (char 1)

    # -*- coding: cp936 -*- #xiaodeng #python 2.7.10 import weibo s='{"name":"xiaodeng&qu ...

  6. Flex布局(CSS Flexbox)

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

  7. [CSS Flex] Flex direction

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

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

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

  9. CSS: Flexbox

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

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

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

随机推荐

  1. linux字符集修改

    首先介绍一下变量. 1.变量类型:本地变量.环境变量.局部变量.特殊变量(内置).参数变量.只读变量. 2.bash的配置文件:profile类和bashrc类 profile类:为交互式登录的she ...

  2. ganglia 服务端

    #!/bin/bash #配置参数 serverIP=192.168.1.16 network=ens32 #关闭selinux setenforce sed -i 's/SELINUX=enforc ...

  3. java this,super简单理解

    *****this****** 表示对当前对象的引用. 作用:1.区分实例变量和局部变量(this.name----->实例变量name) 2.将当前对象当做参数传递给其它对象和方法.利用thi ...

  4. IDEA 更改提示一键补全快捷键

    偏好设置-->KeyMap-->用关键字搜索可以用下面图中的任意词只要能定位到就是可以的 (Choose Lookup Item Replace)然后增加想用的键,个人喜欢直接加一个空格

  5. uni-app中使用scroll-view滚到底部时多次触发scrolltolower事件

    一.前言.scroll-view基本属性: 前言: 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示(在我这个页面中同时使用了三个scroll-view做数据展示),因为这几 ...

  6. KETTLE教程实战

    kettle初探 Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定.Kettle 中文名称叫水壶,该项目的主程 ...

  7. SpringBoot与JPA

    JPA是什么 JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. JPA ...

  8. HDU-6114

    車是中国象棋中的一种棋子,它能攻击同一行或同一列中没有其他棋子阻隔的棋子.一天,小度在棋盘上摆起了许多車--他想知道,在一共N×M个点的矩形棋盘中摆最多个数的車使其互不攻击的方案数.他经过思考,得出了 ...

  9. WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研

    大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的 ...

  10. PG数计算

    PG数计算 原地址:http://xiaqunfeng.cc/2017/09/15/too-many-PGs-per-OSD/ ceph告警问题:”too many PGs per OSD” 的解决方 ...