[CSS] Change the off-axis Alignment of a Flexed Container with `align-items`
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`的更多相关文章
- [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 ...
- [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 ...
- iOS - FlexBox 布局之 YogaKit
由于刚开始的项目主要用的H5.javaScript技术为主原生开发为辅的手段开发的项目,UI主要是还是H5,如今翻原生.为了方便同时维护两端.才找到这个很不错的库. FlexBox?听起来像是一门H5 ...
- 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 ...
- CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...
- div+css样式
Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...
- 应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...
- 前端开发工程师 - 01.页面制作 - 第4章.CSS
第4章.CSS CSS简介 Cascading Style Sheet 层叠样式表:定义页面中的表现样式 history: CSS1(1996)--CSS2(1998)--着手CSS3草案(拆分成很多 ...
- CSS动画划入划出酷炫
HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...
随机推荐
- 通过减少 IO 实现性能的优化
原始地址见 这里 本文是工作中一点点简单的思考,不能保证是完全正确的,可能也仅仅是适用于部分场景. 场景 1:获取用户关注的好友列表中,每个好友的名字.头像等信息. 在很多公司中,不同的服务是由不同的 ...
- C++ 用 vector 生成三维数组,并计算行、列、高
//Microsoft Visual Studio 2015 Enterprise //用vector生成三维数组,并计算行.列.高 #include <iostream> #includ ...
- MySQL事务原理浅析
前言 因为自己对数据的可靠性,可用性方面特别感兴趣,所以在MySQL事务方面看了很多资料,也看了很多博客,所以想到自己也写一篇博客整理整理自己所学内容,尽量用自己的语言解释得通俗易懂. 事务经典场景 ...
- C++11 特性
之前工作中开发/维护的模块大多都是 "远古代码",只能编译 C++98,很多 C++11 的特性都忘得差不多了,再回顾一下 右值引用&转移语义: 消除两个对象交互时不必要的 ...
- k8s安装ingress
1. 环境准备 安装nginx-ingress-controller和backend cd /etc/yum.repos.d/mainfests 下载镜像的脚本 vi ingressnginx.sh ...
- 【日语】日语能力考试N2级核心词汇必备—接续词
日语能力考试N2级核心词汇必备—接续词 顺接 だから 因为......所以......(下文可用命令,意志劝诱等)その結果 其结果(口语,书面语都行,但是比较生硬)したがって 从而,因而(书面语, ...
- javascript_08-while 和 do while
while 和 do while for 当循环次数已知 while 先判断再执行 do while 先执行一次再判断 //1-100 之间所有数字的和 //while // var i = 1; / ...
- oracle concepts学习
祭图一张!!!
- nginx全局配置和性能优化
nginx目录结构和命令 1.ls /apps/nginx/: html是测试页,sbin是主程序 2.ls /apps/nginx/sbin/: nginx 只有一个程序文件 3. ...
- Linux命令——ls
15 Interview Questions on Linux “ls” Command – Part 1 10 Useful ‘ls’ Command Interview Questions – P ...