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. Jenkins+maven+gitlab自动化部署之Jenkins系统管理配置(四)

    一.Jenkins全局工具配置 在jenkins首页依次进入系统管理>>全局工具配置: 1) jdk.git.maven配置 指定其在服务器中的目录位置 二.插件管理 1)依次点开系统管理 ...

  2. Java设计模式：23种设计模式（转）

    单例(Singleton)模式:某个类只能生成一个实例,该类提供了一个全局访问点供外部获取该实例,其拓展是有限多例模式. 原型(Prototype)模式:将一个对象作为原型,通过对其进行复制而克隆出多 ...

  3. Spring Security 官网文档学习

    文章目录 通过`maven`向普通的`WEB`项目中引入`spring security` 配置 `spring security` `configure(HttpSecurity)` 方法 自定义U ...

  4. QT加载自带字体

    #include <QCoreApplication> #include <QStringList> #include <QFontDatabase> #inclu ...

  5. AVR单片机教程——烧写hex文件

    每一次build项目,编译器都会生成多个文件,其中有一个就是hex文件.之前在IDE中配置的external tools,就是把这个hex文件烧写到单片机中去的. 然而,有些时候你想运行别人的程序,但 ...

  6. Python2和3字符编码的区别

    Python2和3字符编码的区别 一.字符编码应用之Python 1.1 执行Python程序的三个阶段 Python test.py(我再强调一遍,执行test.py的第一步,一定是先将文件内容从硬 ...

  7. 《Java Web开发实战》——Java工程师必备干货教材

    一年一度毕业季,又到了简历.offer漫天飞,失望与希望并存的时节.在IT行业,高校毕业生求职时,面临的第一道门槛就是技能与经验的考验,但学校往往更注重学生的理论知识,忽略了对学生实践能力的培养,因而 ...

  8. mac oxs 上查看进程监听的端口号 lsof

    sudo netstat -ltnp |grep xxx lsof -p 26917 | grep LISTEN https://mengkang.net/1090.html

  9. dB分贝计算

    1. 定义 dB-表征相对值的大小的单位,即两个电.声功率之比或者电流.电压.音量之比,是一种测相对大小的单位. 1.1 电.声功率之比——10lg(x/y) x.y分别表示两个欲比较的功率值. 例如 ...

  10. springboot 使用consul 读取配置文件（遇到的坑太多，没记录）

    最终成功版. pom引入mavn依赖: <!--consul--> <dependency> <groupId>org.springframework.cloud& ...