flex布局(主要分清楚容器和条目)
设置在容器上面的属性:
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
1、flex-direction: row | row-reverse | column | column-reverse;
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。*/
2、flex-wrap: nowrap | wrap | wrap-reverse;
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。*/
3、flex-flow: <flex-direction> || <flex-wrap>;
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。*/
4、justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。*/
5、align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。*/
6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。*/
设置在项目上的属性:
1、order: <integer>;定义项目的排列顺序。数值越小,排列越靠前,默认为0。
2、flex-grow: <number>;定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
3、flex-shrink: <number>定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
4、flex-basis: <length> | auto;定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
5、 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6、align-self: auto | flex-start | flex-end | center | baseline | stretch;属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
例子:弹性布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
display:flex;
align-items:center;
/*flex-direction: column ;*/
}
li{
flex: 1;
}
ul li img{
width: 200px;
}
</style>
</head>
<body>
<ul>
<li><img src="pic01.jpg"/></li>
<li><img src="pic01.jpg"/></li>
<li><img src="pic01.jpg"/></li>
<li><img src="pic01.jpg"/></li>
</ul>
</body>
</html>
flex布局(主要分清楚容器和条目)的更多相关文章
- flex布局学习
教程来自阮一峰的flex布局教程实例篇 容器五大属性: flex-direction:容器内项目的排列方向 (1)row:横向从左往右排列(默认) (2)row-reverse:横向从右往左排列 (3 ...
- flex布局学习总结
最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...
- CSS之Flex 布局
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...
- Flex布局--必然的选择
这篇文章是我在阮一峰老师的flex布局教程下,按照自己的理解重写写一遍,以便增强理解.如果你来到这里最好去看一下阮一峰大神的Flex布局教程 正式开始自己的. 说起布局方式,大家首先要了解css3有哪 ...
- flex布局属性说明
flex布局又称为盒子布局或弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局. 给父容器添加display: flex/inline-flex;属性,即可使容器内容采 ...
- Flex布局-容器的属性
本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...
- flex布局实现elment容器布局
一.flex布局是什么 flex布局,意为"弹性布局",是一种响应式的布局方法 采用 Flex 布局的元素,称为 Flex 容器,它的所有子元素自动成为容器成员. 先放上一个ele ...
- CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
- CSS3 Flex布局(容器)
一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...
随机推荐
- 图片懒加载和UA池,UA代理池
1,动态数据加载的处理 图片懒加载概念: 图片懒加载是一种页面优化技术.图片作为一种网络资源,在被请求时也与静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面首屏加载时间 ...
- Codeforces 709E. Centroids 树形DP
题目链接:http://codeforces.com/contest/709/problem/E 题意: 给你一棵树,你可以任删一条边和加一条边,只要使得其仍然是一棵树,输出每个点是否都能成为重心 题 ...
- NS3网络仿真(4): DataRate属性
快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 在first.py中创建了一个点到点的信道,且配置了两个属性: pointToPoint = ns ...
- ABAP WEBRFC
通过WEBRFC实现在网页下载SMW0上传的文件 FUNCTION zhr_download_test. *"---------------------------------------- ...
- java定时器2-spring实现
spring定时器(基于xml) spring定时器(基于注解) quartz定时器 1.使用基于xml配置的spring定时器 首先编写定时任务类Mytask public class Mytask ...
- 计算机学院大学生程序设计竞赛(2015’11)1005 ACM组队安排
1005 ACM组队安排 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Pro ...
- div+css布局教程系列2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Ubuntu linux 返回上一次访问的目录
cd - (cd空格 减号)返回最近一次访问的目录 这个非常方便.平时经常用终端切换目录,能够方便地回到原来的目录就很爽了. jiqing@jiqing-pad:/usr/local/redis/sr ...
- jquery操作ID带有变量的节点
var indexNode='content'+index;$("#"+indexNode).show( 'puff', { }, 500, callback );
- bzoj 4842: [Neerc2016]Delight for a Cat【最小费用最大流】
考试题搞了好久也没懂-- 正解应该是线性规划 https://www.cnblogs.com/CQzhangyu/p/7894559.html 可是不会写啊 如果从网络流的角度来体会大概是这样 htt ...