CSS之flex

时间 2019-11-09

标签 css flex 栏目 CSS 繁體版

原文原文链接

CSS flex

前言：css

年前公司招进来一个高级前端，最近闲谈中聊到了他以前找工做面试时的状况。        
在对大佬油然起敬的同时，深感本身的不足。便产生了再次写博客的想法。
写博文一方面巩固之前的知识，另外一方面记录和督促学习新的知识内容。        
复制代码

1. 初识 flex

flex 是 flexible 的缩写，意思为弹性布局，用来为盒模型提供最大的灵活性。
任何一个容器均可以指定为 flex 布局( 包括行内元素 )：html

div { display: flex}
复制代码

元素设置 flex 属性后，其具备的 float clear vertical-align 都将失效前端

2. flex 布局和正常布局比较

常规布局：面试
- 块级元素自上而下排列
- 元素只有高度，没有宽度时，宽度默认100%
- 元素只有宽度，没有高度时，高度为 0
flex 布局bash
- 容器内元素默认从左往右排列
- 元素只有高度，没有宽度时，宽度为 0
- 元素只有宽度，没有高度时，高度默认100%

成为 flex 容器的元素默认有两条轴：水平主轴（main axis）和垂直交叉轴(cross axis)，单个项目占据的主轴空间称为 main size，交叉轴为 cross size，下面这张图很好的说明了：ide

3. flex 属性

flex-direction 改变主轴的方向，默认为 row 横向排列。属性包含 row | row-reverse | column | column-reverse
flex-wrap 控制元素换行。属性包含 nowrap | wrap | wrap-reverse
align-content 控制多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。属性包含 flex-start | flex-end | center | space-between | space-around | stretch
justify-content 控制在主轴上的对齐方式。属性包含 flex-start | flex-end | center | space-between | space-around
align-items 控制交叉轴上如何对齐。包含的属性有 flex-start | flex-end | center | baseline | stretch
align-self 属性容许单个项目有与其余项目不同的对齐方式。包含的属性 auto | flex-start | flex-end | center | baseline | stretch
order 属性控制元素的排列顺序，数值越小，排列越靠前。
flex-grow 属性定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大。
flex-shrink 属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。
flex-basis 属性定义了项目占据主轴的空间，默认为 auto ，即元素原本大小。
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。

能够利用 flex 实现筛子的排布，同时也锻炼了对 flex 的属性的使用布局

4. flex 的应用

能够利用 flex 实现居中布局

<style> /* 使用 flex 进行布局 */ .wrap { display: flex; justify-content: center; align-items: center; height: 400px; width: 100%; border-bottom: 1px solid black; } .box { height: 200px; width: 200px; background: red; } </style>

<body>

<div class="wrap">
    <div class="box"></div>
</div>

</body>
复制代码

使用 flex 实现简易的弹性伸缩布局

<style> * { margin: 0; padding: 0; } body, html { height: 100%; } body { display: flex; flex-direction: column; } header { flex: 0 0 100px; background: #cecece; } .content { flex: 1; background: yellow; display: flex; } aside { background: pink; flex: 0 1 25%; } section { flex: 1; } footer { flex-basis: 70px; background: red; } </style>    
</head>
<body>
<header>
    header
</header>
<div class="content">
    <aside></aside>
    <section></section>
</div>
<footer>
    footer
</footer>
</body>
复制代码

熟练使用 flex 相比于使用 float 更加快捷和方便，但其对 IE 低版本兼容性不是很好。有 IE 需求的状况下仍是推荐使用 float 布局。学习

1. css flex 之 flex-grow | flex-direction
2. CSS之flex
3. CSS之flex兼容
4. CSS之flex布局
5. CSS之Flex布局
6. css flex => flex-wrap
7. css flex
8. css之Flex布局(二)
9. CSS学习之flex布局
10. css之 flex的使用
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 互联网组织的未来：剖析GitHub员工的任性之源
• 使用阿里云OSS+CDN部署前端页面与加速静态资源