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. 迅雷下载敏感资源 迅雷应版权方要求无法下载 μTorrent使用方法（六种方法，值得你看）(22)

    1. 解决方案1 1.1 声明 此方法只适用于迅雷极速版,迅雷X不管用. 修改后下载有些磁力链接或种子,依然无反应.不是说该方法无效,而是有些种子资源不佳,很难下载,需要等半天才能连接上开始下载.如果 ...

  2. Mysql之rpm安装5.7版本遇见的问题

    前言:环境是centos7.5的系统,用rpm方式安装mysql5.7 1.由于是centos7.5 所以需要将默认的mariadb给卸载 rpm -qa | grep mariadb 查看下是否有m ...

  3. 07 IO流（四）——文件字节流 FileInputStream/FileOutputStream与文件的拷贝

    两个类的简述 专门用来对文件进行读写的类. 父类是InputStream.OutputStream 文件读入细节 FileOutputStream流的构造方法:new FileOutputStream ...

  4. 14 IF函数

    情景 某销售表,如果员工的销售额大于5000元,提成为10%,否则为8% IF函数 =IF(表达式,值1,值2) 判断表达式,如果表达式为真,显示值1,如果表达式为假,显示值2 示例

  5. 暑期ACM集训

    2019-07-17 08:42:11 这是总结昨天的做题情况 总体来说,好久的没做题了,实力下降了许多,这一个月假又学习吧!!!! A - Ropewalkers Polycarp decided ...

  6. IIS不能下载config配置文件的解决方法

    之前作程序升级的时候,需要从服务端下载后缀为config的配置文件,结果程序抛出404异常.后来百度才知道,是IIS禁止下载config文件的原因.在这里记录一下解决方法. 在我的电脑,右键管理,打开 ...

  7. PB笔记之日期函数

    https://wenku.baidu.com/view/a0d5f16fb84ae45c3b358cc7.html this.object.yjzzrq[row]= RelativeDate(dat ...

  8. vue-cli 3.0 端口变5位数

    问题原因 :   portfinder1.0.22版本导致vue-cli-service servey启动后,服务端口变成了随机端口的问题 解决办法: 删了目录 下的node-modules 然后 执 ...

  9. Maven安装和加速

    Maven安装和加速 下载带二进制源码包,解压 将bin设置为环境变量 加速器,修改conf文件夹下的settings.xml文件,添加如下镜像配置: <mirrors> <mirr ...

  10. 针对Web的攻击技术

    主动攻击 SQL注入攻击 OS命令注入攻击 会话劫持 被动攻击 XSS攻击 CSRF攻击 HTTP首部注入攻击 会话固定攻击 一.主动攻击 1.SQL注入攻击(案例) 什么是SQL? SQL是用来操作 ...