CSS3 -- display:flex

弹性盒子

零、

父元素为display: flex;孙元素不受影响：所以想让子元素不受父元素影响，在子元素上套一层，让子元素变成孙元素

一、容器的属性（6）

display、 flex-direction、 flex-wrap、 justify-content、 align-items、 align-content

❶ display: inline-flex / flex;

(Webkit内核的浏览器，必须加上-webkit前缀。)

❷ flex-direction: row | row-reverse | column | column-reverse;（主轴左右还是上下，左始还是右始）

❸ flex-wrap: nowrap | wrap | wrap-reverse;（项目换行）

❹flex-flow: <flex-direction> || <flex-wrap>;（❷ 和 ❸的合体）

❺ justify-content: flex-start | flex-end | center | space-between | space-around;（主轴对齐方式）

　　space-between：两端对齐，项目之间的间隔都相等。
　　space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

❻ align-items: flex-start | flex-end | center | baseline | stretch;（交叉轴对齐方式）

　　baseline: 项目的第一行文字的基线对齐。
　　stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

display: flex;
justify-content: center;
align-items: center;
width: 100%;
/* 为什么加width: 100%;才能上下左右居中 */
/* 会让子元素上下左右居中*/

二、项目的属性（6、儿子的属性）

① order: <integer>; （/* default 0 */ 插队排序 -- 类z-index）

② flex-grow　　　　/* default 0 */

③ flex-shrink　　　　/* default 1 */

④ flex-basis

⑤ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]（② ③ ④简写）

⑥ align-self

三、

Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item）

主轴
交叉轴
main start
main end
cross start
cross end
main size（宽）
cross size（高）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Flex</title><style>.flex{display: flex;width: auto;height: 200px;background: #ccc;}.inlineFlex{display: inline-flex;width: auto;height: 200px;border: 1px solid #000;margin-top: 20px;}section{/* margin-left: 10px; *//* width: 200px; */flex-grow: 1;}.f1{order: 9;}.f2{flex-grow: 2;}.f3{}.f4{order: -2;}.f5{}.f6{}</style>
</head>
<body><div class="flex"><section class="f1">1</section><section class="f2">2</section><section class="f3">3</section><section class="f4">4</section><section class="f5">5</section></div><div class="inlineFlex"><article>01</article><article>02</article><article>03</article><article>04</article><article>05</article><article>06</article><article>07</article></div><div class="inlineFlex"></div>
</body>
</html>

http://www.runoob.com/w3cnote/flex-grammar.html ->

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

转载于:https://www.cnblogs.com/lgyong/p/9231735.html

CSS3 -- display:flex相关推荐

CSS3 display:flex和display:box有什么区别？
box-flex主要让子容器针对父容器的宽度按一定规则进行划分box主要是控制父容器里面子元素的排列方式.排列顺序.垂直(水平)对齐方式转载于:https://www.cnblogs.com/zhp ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
CSS3 【display: flex；】与【align-self: 可覆盖父元素设置algin-items；】的使用
align-self 简介: 可覆盖父元素设置的 algin-items,包括 flex-start.flex-end.center.stretch align-self 使用: <!DOCTY ...
css3弹性盒子display:flex常见属性总结
一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...
display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
新闻列表页flex_使用css3的Flex布局实现列表展示
实现效果图如下: 通过css3样式实现(部分代码): .box{display:flex;flex-wrap:wrap;justify-content:space-between;align-cont ...
CSS的display:flex说明
在进行网页前端设计时,需要垂直居中显示文本,但CCS似乎没有明确的垂直居中的代码方法,由于目前的页面不再考虑以前的浏览器了,因此采用CSS3的display:flex方法来实现.现记录一下flex属性 ...
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
1.css3弹性盒子 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提 ...

CSS3 -- display:flex

CSS3 -- display:flex相关推荐

最新文章

热门文章