CSS3 Flex 弹性布局实例代码详解


Posted in HTML / CSS onNovember 01, 2018

一、基本概念

CSS3  Flex 弹性布局实例代码详解

//任何一个容器都可以指定为Flex布局。
 .box{
   display: flex;
 }
 //行内元素也可以使用Flex布局。
 .box{
   display: inline-flex;
 }
 //注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二、容器属性

1. flex-direction

flex-direction 决定项目的排列方向
 

.box {
   flex-direction: row | row-reverse | column | column-reverse;
 }

2. flex-wrap

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap 属性定义,如果一条轴线排不下,如何换行。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

3. flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

.box {
   flex-flow: <flex-direction> || <flex-wrap>;
 }

4. justify-content

justify-content 属性定义了项目在水平方向的对齐方式。

.box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
 }

5. align-item

align-item 属性定义了项目在垂直方向的对齐方式。

.box {
   align-items: flex-start | flex-end | center | baseline | stretch;
 }

3.6  align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

三、项目的属性

1.  order

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
 

.item {
   order: <integer>;
 }

2.  flex-grow

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
   flex-grow: <number>; /* default 0 */
 }
 //如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

3.  flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
   flex-shrink: <number>; /* default 1 */
 }

4. flex-basis

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
 

.item {
   flex-basis: <length> | auto; /* default auto */
 }
 /*它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。*/

4.5  flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

4.6 align-self属性

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。等同于 align-items
 

.item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
 }

总结

以上所述是小编给大家介绍的CSS3  Flex 弹性布局实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 #HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 #HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP编写简单的App接口
2016/08/28 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
高三自我评价
2014/02/01 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
初中生物教学反思
2016/02/20 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS