We changed the axis layout with 'justify-content', and the "off axis" layout is controlled by 'align-items'. The most common values are flex-start, flex-end, or center.

body {

  display: flex;

  flex-direction: row;

}

.container {

  background-color: #ebb871;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: flex-start;

  align-items: flex-end;

  align-items: center

}
<body>

    <div class="container">

        <div class="box1 red"></div>

        <div class="box2 green"></div>

        <div class="box3 blue"></div>

    </div>

</body>

[CSS] Change the off-axis Alignment of a Flexed Container with `align-items`的更多相关文章

  1. [CSS] Change the auto-placement behaviour of grid items with grid-auto-flow

    We can change the automatic behaviour of what order our grid items appear. We can even re-order the ...

  2. [CSS] Change the Alignment of a Single Flexed Item with 'align-self'

    Inside of a flexed container, a single item can control its own flex with align-self. The possible v ...

  3. iOS - FlexBox 布局之 YogaKit

    由于刚开始的项目主要用的H5.javaScript技术为主原生开发为辅的手段开发的项目,UI主要是还是H5,如今翻原生.为了方便同时维护两端.才找到这个很不错的库. FlexBox?听起来像是一门H5 ...

  4. Designing CSS Layouts With Flexbox Is As Easy As Pie

    This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Sm ...

  5. CSS之垂直水平居中的背后

    最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...

  6. div+css样式

    Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...

  7. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  8. 前端开发工程师 - 01.页面制作 - 第4章.CSS

    第4章.CSS CSS简介 Cascading Style Sheet 层叠样式表:定义页面中的表现样式 history: CSS1(1996)--CSS2(1998)--着手CSS3草案(拆分成很多 ...

  9. CSS动画划入划出酷炫

    HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...

随机推荐

  1. [转帖]深度分析HBase架构

    深度分析HBase架构 https://zhuanlan.zhihu.com/p/30414252   原文链接(https://mapr.com/blog/in-depth-look-hbase-a ...

  2. [Oracle] - 使用32位 PLSQL（PL/SQL Developer）登陆64位Oracle失败之解决

    配置环境 Oracle服务端oracle_winx64_12c_database.iso Oracle客户端instantclient-basiclite-nt-12.1.0.1.0.zip 集成开发 ...

  3. 多线程（7）— JDK对锁优化的努力

    JDK内部的“锁”优化策略 1. 锁偏向 锁偏向是针对加锁操作的优化手段,核心思想是:如果一个线程获得了锁,那么锁就进入偏向模式,当这个线程再次请求锁时,无须再做任何同步操作,这样就节省了大量有关锁申 ...

  4. STL源码剖析——空间配置器Allocator#3 自由链表与内存池

    上节在学习第二级配置器时了解了第二级配置器通过内存池与自由链表来处理小区块内存的申请.但只是对其概念进行点到为止的认识,并未深入探究.这节就来学习一下自由链表的填充和内存池的内存分配机制. refil ...

  5. PAT甲级 链表题_C++题解

    链表处理 PAT (Advanced Level) Practice 链表题 目录 <算法笔记> 重点摘要:静态链表 1032 Sharing (25) 1052 Linked List ...

  6. idea代码提示快捷键设置

    代码提示快捷键设置: keymap--Main Menu--Code--Completion--Basic

  7. 1byte、1KB、4KB，1MB、1GB用16进制表示的范围。任意地址范围求字节数

    1byte.1KB.4KB,1MB.1GB用16进制表示的范围.任意地址范围求字节数 2018-02-12 18:27:48 望那伊人 阅读数 5032更多 分类专栏: 计算机相关   版权声明:本文 ...

  8. 手写PE结构解析工具

    PE格式是 Windows下最常用的可执行文件格式,理解PE文件格式不仅可以了解操作系统的加载流程,还可以更好的理解操作系统对进程和内存相关的管理知识,而有些技术必须建立在了解PE文件格式的基础上,如 ...

  9. [ICCV 2019] Weakly Supervised Object Detection With Segmentation Collaboration

    新在ICCV上发的弱监督物体检测文章,偷偷高兴一下,贴出我的poster,最近有点忙,话不多说,欢迎交流- https://arxiv.org/pdf/1904.00551.pdf http://op ...

  10. Vue框架之组件与过滤器的使用

    一.组件的使用 局部组件的使用 ​ 打油诗: 1.声子 2.挂子 3.用 var App = { tempalte:` <div class='app'></div>` }; ...