Flex布局

发表于 | 分类于

最近在做一个关于区块链可视化的前端页面练习，尝试了flex布局，作个简单的summary。

网页布局

区块图展示部分刚开始使用的是布局的传统解决方案: 基于盒状模型，依赖display属性+position属性+float属性，后来发现Flex弹性布局更好用，垂直方向居中完全不是问题，盒子换行放置也很easy。

Flex布局即是一种弹性布局。任何一个容器都可以指定为Flex布局（display:flex），行内元素也可以使用（display:inline-flex）。

注意：设为Flex布局以后，子元素的float,clear,和vertical-align属性将失去作用。

基本概念

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

容器的属性

容器

每个属性对应的含义是：

• 项目排列方向；可取四个值： row | row-reverse | column | column-reverse
• 项目是否换行，怎么换；可取三个值： nowrap | wrap | wrap-reverse
• 前2个属性的简写; 取值： <flex-direction> || <flex-wrap>
• 项目在主轴上的对齐方式，与主轴的方向有关；可取五个值： flex-start | flex-end | center | space-between | space-around
• 项目在交叉轴上的对齐方式,与交叉轴的方向有关；可取五个值： flex-start | flex-end | center | baseline | stretch
• 多根轴线的对齐方式，若项目只有一根轴线，该属性不起作用；可取六个值： flex-start | flex-end | center | space-between | space-around | stretch

项目的属性

项目

每个属性对应的含义是：

• 项目排列顺序，值越小，排列越靠前；默认为0
• 有多余空间时，项目是否放大；默认为0，不放大
• 空间不够时，项目是否缩小；默认为1，缩小
• 分配多余空间之前，项目占据的主轴空间；默认为auto,即原本大小
• flex-grow, flex-shrink 和 flex-basis属性的简写（优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值），常用的两个快捷值： auto(1 1 auto)和none(0 0 auto)
• 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性；默认值为auto

我的布局

HTML结构

1 . 包含所有区块的大div ->.d3layout（容器）；
2 . 大div里包含3个次大div ->.block-row（既是容器又是项目）；
3 . 每个次大div里包含5个或者2个小div -> .block/.block_0（项目）；

HTML结构

CSS

第一层的大div
.d3layout{
    width: 935px;
    margin: 20px 0;
    height: 740px;
/*flex布局容器*/
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: space-around;
}
第二层的次大div
.rowTop,.rowMiddle,.rowBottom{
    height: 202px;
    width: 935px;
/*flex布局项目*/
    flex: auto; /*（1，1，auto）*/

/*flex布局容器*/
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
第三层的小div
.block_0{
    width: 703px;
    height: 180px;
  /*flex布局项目*/
     flex: 0 1 auto;
}

.block{
    width: 145px;
    height: 180px;
/*flex布局项目*/
    flex: 0 1 auto;
}

布局效果

黑色为大div；红色为次大div；灰色为小div

效果图

最终在实践过程中，又添了一层，灰色小div.block里还包括上下两个div，仍然用的flex布局。

注：基本概念参考来源

-------------完-------------