阅读 3087

CSS之flex

CSS flex

前言:

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

1. 初识 flex

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

div { display: flex}
复制代码

元素设置 flex 属性后,其具有的 float clear vertical-align 都将失效

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

  • 常规布局:

    • 块级元素自上而下排列
    • 元素只有高度,没有宽度时,宽度默认100%
    • 元素只有宽度,没有高度时,高度为 0
  • flex 布局

    • 容器内元素默认从左往右排列
    • 元素只有高度,没有宽度时,宽度为 0
    • 元素只有宽度,没有高度时,高度默认100%

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

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 布局。

关注下面的标签,发现更多相似文章
评论