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. 通过减少 IO 实现性能的优化

    原始地址见 这里 本文是工作中一点点简单的思考,不能保证是完全正确的,可能也仅仅是适用于部分场景. 场景 1:获取用户关注的好友列表中,每个好友的名字.头像等信息. 在很多公司中,不同的服务是由不同的 ...

  2. C++ 用 vector 生成三维数组，并计算行、列、高

    //Microsoft Visual Studio 2015 Enterprise //用vector生成三维数组,并计算行.列.高 #include <iostream> #includ ...

  3. MySQL事务原理浅析

    前言​ 因为自己对数据的可靠性,可用性方面特别感兴趣,所以在MySQL事务方面看了很多资料,也看了很多博客,所以想到自己也写一篇博客整理整理自己所学内容,尽量用自己的语言解释得通俗易懂. 事务经典场景 ...

  4. C++11 特性

    之前工作中开发/维护的模块大多都是 "远古代码",只能编译 C++98,很多 C++11 的特性都忘得差不多了,再回顾一下 右值引用&转移语义: 消除两个对象交互时不必要的 ...

  5. k8s安装ingress

    1. 环境准备 安装nginx-ingress-controller和backend cd /etc/yum.repos.d/mainfests 下载镜像的脚本 vi ingressnginx.sh ...

  6. 【日语】日语能力考试N2级核心词汇必备—接续词

    日语能力考试N2级核心词汇必备—接续词 顺接 だから 因为......所以......(下文可用命令,意志劝诱等)その結果  其结果(口语,书面语都行,但是比较生硬)したがって  从而,因而(书面语, ...

  7. javascript_08-while 和 do while

    while 和 do while for 当循环次数已知 while 先判断再执行 do while 先执行一次再判断 //1-100 之间所有数字的和 //while // var i = 1; / ...

  8. oracle concepts学习

    祭图一张!!!

  9. nginx全局配置和性能优化

    nginx目录结构和命令 1.ls /apps/nginx/:         html是测试页,sbin是主程序 2.ls /apps/nginx/sbin/:  nginx 只有一个程序文件 3. ...

  10. Linux命令——ls

    15 Interview Questions on Linux “ls” Command – Part 1 10 Useful ‘ls’ Command Interview Questions – P ...