弹性盒模型flex
一、flex
flex是flexible box的缩写，意为“弹性布局”；
定义弹性布局
display:flex;
box{
display:flex;
}
二、基本定义
我只简单的说一下容器和项目，因为只关系容器和项目来讲的（个人理解）。
三、 容器的属性
有6个属性
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
一下对6个容器属性的简单介绍
1. flex-direction属性决定排列方向
值：
row(默认值)：水平方向，从右边开始。
row-reverse：水平方向，从右边开始。
column：垂直方向，从上到下。
column-reverse：垂直方向，从下往上
2. flex-wrap如何换行
值：
nowrap（默认值）：不换行。
wrap：换行，第一行在上面
wrap-reverse：换行。第一行在下方。
3. flex-flow是上面两个属性的缩写，默认值为row nowrap。
4. justify-content定义水平方向对齐方式
值：
flex-start(默认值)：左对齐。
flex-end：右对齐。
center：水平居中
space-between：两端对齐，项目之间间隔相等。
space-around：每个项目两侧的间隔相等。
5. align-items垂直对齐方式
flex-start：y轴的起点对齐。
flex-end：y轴的终点对齐。
center：垂直居中
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目没有设置高度或者为auto，将占满整个容器。
6. align-content定义多个轴对齐方式（这里不详细讲解虽然整个讲解都不详细）。
四、项目属性
一下6个项目属性设置在项目上。
1. order
2. flex- grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self
1. order属性定义项目的排列顺序。数值越小，排列越考前，默认值为0。
2. flex- grow属性定义项目的放大比例，默认值为0，即不放大。如果项目值都为1则平均分，有个值为2其他值为1则占据剩余空间比1多一倍。
3. flex-shrink定义项目的缩小比例，默认为1，如过空间不足，项目将缩小。
4. flex-basis定义了在分配多余空间之前，项目的主轴空间。它可以设为width或height属性一样的值，则该项目占据固定的空间。
5. flex是上面2、3、4项的简写方式，默认值为0 1 auto。
6. align-self属性允许单个项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承夫元素的align-items属性，如果没有夫元素，则等同于stretch。除了auto，其他值和align-items属性完全一样。
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid black;
}
.boxBig{
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.box1{
border: 1px solid red;
width: 100px;
height: 100px; }
</style>
</head>
<body>
<div class="boxBig">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</body>
弹性盒模型flex的更多相关文章
- 弹性盒模型 flex box
弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项. 而因 ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
- CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
- CSS弹性盒模型flex概念
盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- CSS3弹性盒模型flex box快速入门 2016.03.16
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- css3弹性盒模型flex快速入门与上手1
一.什么是flex? flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式,大多人称之为弹性布局. 二.怎么使用flex? 任何一个容器都可以指定为flex布局 #box ...
随机推荐
- 8.快速索引、listview
实现这样的效果 布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- java初级笔记
1:java核心优势:跨平台,一次编译,四处运行,只要安装了对应的jvm虚拟机: 2:JVM其实就是一种规范,就是一个虚拟的用于执行bytecode字节码的计算机: 3:数据类型分为四类八种,整数型( ...
- apollo入门demo实战（二）
1. apollo入门demo实战(二) 1.1. 下载demo 从下列地址下载官方脚本和官方代码 https://github.com/nobodyiam/apollo-build-scripts ...
- python图像处理库PIL的基本概念介绍
PIL中所涉及的基本概念有如下几个:通道(bands).模式(mode).尺寸(size).坐标系统(coordinate system).调色板(palette).信息(info)和滤波器(filt ...
- openjtag 的硬件连接踩坑历程
这个事情踩了不少坑,这个要记录一下: 1 代码的下载和编译按照下面的来:https://github.com/pulp-platform/pulp-debug-bridge 注意点: A 要最好使用p ...
- 微信小程序分包加载实战
"离线包"机制 微信小程序采用的是类似离线包加载方案,以转转小程序为例,当用户第一次打开时会先下载好所有代码,然后再加载页面:当用户再次进入转转小程序时,会直接使用已下载的代码,省 ...
- 解决方案：ppt打不开，显示发现文件中的内容有问题。可尝试修复此演示文稿
ppt打不开,显示发现文件中的内容有问题.可尝试修复此演示文稿 故障截图如下: 解决方法: 主要是因为文件是网络下载的,office自动锁定了文件(默认不可编辑).在文件上右键-属性-解除锁定(最下面 ...
- 关于sql和MySQL的语句执行顺序(必看！！！)
今天遇到一个问题就是mysql中insert into 和update以及delete语句中能使用as别名吗?目前还在查看,但是在查阅资料时发现了一些有益的知识,给大家分享一下,就是关于sql以及My ...
- Jenkins问题记录：android构建时提示Unzipping /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zip to /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9 Except
-------------- -------------- 问题:今日job构建报出如下错误: Unzipping /home/.gradle/wrapper/dists/gradle-3.3-all ...
- 剑指offer-学习笔记
前言:18/06/06开始学习,每个程序都会用C写一遍,因书中用C++举例,也会换种思路写,供学习和参考!!!很推荐这本书很不错,准备入手,一般不买实体书,都用电子书,因一般都看一遍,但这本会看很多遍 ...