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. python与redis交互及redis基本使用

    Redis简介 Redis是一使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日个开源的志型.Key-Value数据库,并提供多种语言的API. 从2010年3月15日起,Redis的开发工 ...

  2. python网络爬虫之自动化测试工具selenium[二]

    目录 前言 一.获取今日头条的评论信息(request请求获取json) 1.分析数据 2.获取数据 二.获取今日头条的评论信息(selenium请求获取) 1.分析数据 2.获取数据 房源案例(仅供 ...

  3. 在 Kubernetes 集群快速部署 KubeSphere 容器平台

    KubeSphere 不仅支持部署在 Linux 之上,还支持在已有 Kubernetes 集群之上部署 KubeSphere,自动纳管 Kubernetes 集群的已有资源与容器. 前提条件 Kub ...

  4. NIO-Buffeer

    目录 NIO-Buffeer 目录 什么是Buffer 缓冲区类型 缓冲区存储类型 字节存放顺序 Buffer使用 Buffer ByteBuffer 总结 相关文献 NIO-Buffeer 目录 N ...

  5. Select下拉框onchange事件获取option的value值

    首先方法中使用到了jqury,首先导入jqury的插件: 如果jqury的小插件没有的话,就去网上下载一个吧,jqury比原生的js使用起来方便了很多,这里也提供一个我的jqury的下载地址: jqu ...

  6. 漫谈LiteOS之开发板-GPIO(基于GD32450i-EVAL)

    [摘要] 本文主要从GPIO的定义.工作模式.特色.工作场合.以及GD32450i-EVAL开发板的引脚.对应的寄存器以及GPIO的流水灯示例对GPIO加以介绍,希望对你有所帮助. 1定义 GPIO( ...

  7. PyTorch官方教程中文版

    首先呈上链接:http://pytorch123.com/ PyTorch是一个基于Torch的Python开源机器学习库,用于自然语言处理等应用程序.它主要由Facebookd的人工智能小组开发,不 ...

  8. 转:Java logger组件:slf4j, jcl, jul, log4j, logback, log4j2

    先说结论 建议优先使用logback 或 log4j2.log4j2 不建议和 slf4j 配合使用,因为格式转换会浪费性能. 名词:jcl 和 jul 标题中的 jcl 是 apache Jakar ...

  9. 《手把手教你》系列进阶篇之2-python+ selenium自动化测试 - python基础扫盲(详细教程)

    1. 简介 这篇文章主要是分享讲解一下,如何封装自己用到的方法和类.以便方便自己和别人的调用,这样就可以避免重复地再造轮子. 封装(Encapsulation)是面向对象的三大特征之一(另外两个是继承 ...

  10. GitHub 上值得参考的完整的 iOS-App 源码

    转自:https://www.zhihu.com/question/28518265 作者:wjh2005链接:https://www.zhihu.com/question/28518265/answ ...