弹性盒模型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 ...
随机推荐
- 每天学点SpringCloud（八）：使用Apollo做配置中心
由于Apollo支持的图形化界面相对于我们更加的友好,所以此次我们使用Apollo来做配置中心 本篇文章实现了使用Apollo配置了dev和fat两个环境下的属性配置.Apollo官方文档https: ...
- 吴恩达机器学习笔记15-假设陈述（Hypothesis Representation）
在分类问题中,要用什么样的函数来表示我们的假设呢?此前说过,希望我们的分类器的输出值在0 和1 之间,因 此,我们希望想出一个满足某个性质的假设函数,这个性质是它的预测值要在0 和1 之间.回顾在一开 ...
- 第85节：Java中的JavaScript
第85节:Java中的JavaScript 复习一下css: 选择器的格式: 元素选择器:元素的名称{} 类选择器:. 开头 ID选择器:# ID选择器 后代选择器: 选择器1 选择器2 子元素选择器 ...
- SVG之Path
一.Path概述 1.控制命令 SVG提供了一些基础图形元素标签如<circle>.<rect>.<ellipse>.<line>.<polyli ...
- Kali学习笔记6：二层发现
先介绍下ARPING命令: arping命令是用于发送ARP请求到一个相邻主机的工具 arping使用arp数据包,通过PING命令检查设备上的硬件地址.能够测试一个IP地址是否是在网络上已经被使用, ...
- 免费开源的diff软件“meld”-替代beyond compare的神器
命令行直接对比文件 meld dir1 dir2 & 1,安装 mld, 可以选择windows, linux, macos系统,都有提供安装. ubuntu 中安装: sudo apt-ge ...
- [原创] 详解云计算网络底层技术——虚拟网络设备 tap/tun 原理解析
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 在云计算时代, ...
- Xamarin.Android 启动页
打开软件的时候相当慢,会有白屏显示,这样的用户体验效果不好,所以需要增加一个启动页来过渡.步骤如下: 第一步:根据自己需求找到一个png图片,用于启动展示,放在Drawable 文件夹下,我这里命名为 ...
- (转)Db2 数据库常见堵塞问题分析和处理
原文:https://www.ibm.com/developerworks/cn/analytics/library/ba-lo-db2-common-blocking-problem-analyze ...
- 如何在mpvue下收集小程序的formId
什么是formId formId是小程序可以向用户发送模板消息的通行证,简单而言,你只有获取到formId,把它交给后台,后台同学才能向用户发送通知消息,而这个通行证的有效期只有七天.这是微信为了防止 ...