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. [转帖]商用数据库之死：Oracle 面临困境

    商用数据库之死:Oracle 面临困境 投递人 itwriter 发布于 2019-10-20 08:22 评论(1) 有238人阅读 原文链接 [收藏] « » https://news.cnblo ...

  2. C++实现2048小游戏

    代码如下: #define _CRT_SECURE_NO_WARNINGS//去掉编译器内部扩增问题 #include<stdio.h> #include<stdlib.h> ...

  3. PB笔记之数据窗口可编辑的条件

    1.列的tab order为0,列不能获得焦点2.dw_control.object.datawindow.readonly="yes"3.DW.Object.<Column ...

  4. AS3动画效果常用公式

    缓动公式: sprite.x += (targetX – sprite.x) * easing;//easing为缓动系数变量 sprite.y += (targetY – sprite.y) * e ...

  5. shell 学习笔记1-什么是shell，shell变量

    一.介绍 1.什么是shell Shell 既是一种命令语言,又是一种程序设计语言,他在操作系统得最外层,负责直接与用户对话,把用户得输入解释个OS,并处理各类操作系统得输出结果,输出到屏幕返回个i用 ...

  6. javascript 之 命名空间

    注意点: 1/IIFE是现代js框架最主要的基础设施,保证变量不被污染. 2/基本上我们把命名空间等同于框架的名字. 内容 一.简单的命名空间 <input type="button& ...

  7. PHP 的闭包

    匿名函数 提到闭包就不得不想起匿名函数,也叫闭包函数(closures),貌似PHP闭包实现主要就是靠它.声明一个匿名函数是这样: 1 $func = function() { 2 3 }; //带结 ...

  8. va_start可变参数函数

    void va_start(va_list ap, last); //变参起始地址 type va_arg(va_list ap, type); //下一个参数的地址 void va_end(va_l ...

  9. Xshell 上传文件到Ubuntu

    打开Xshell,连上一台Linux服务器或者是虚拟机 如果要方便的上传文件,需要rz 先测试是否安装rz 命令行~$ rz 如果出现未安装(或者command not found)且建议sudo a ...

  10. 30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用

    2016年时,Jerry曾经写过一系列关于SAP Fiori Smart Template(现在更名为Fiori Elements了)的博客,介绍了所谓的MDD开发方法论 - Metadata Dri ...