Flex - 灵活布局，随心所欲

2018-03-02 本文已影响31人亨利何

[前言]

"年味"在今天算是彻底散去了，大家记得吃元宵，元宵节快乐！

Page Layout

Page Layout - 谈到布局大脑里总会反射出几个关键词“position, float
, clear”-(令人咂舌的东西)，页面元素采用合适的布局会让你的页面给人的直观感受产生质的飞跃。合适的布局不仅仅由独特的美感，而且对于信息的展示更是锦上添花，同时对越代码的书写也会起到正向引导。

本篇文章主要谈的是Flex，利用Flex来对页面进行需要的布局，如何来操作，如何依照Flex的操作流程复现或是实现自己想要实现的页面效果。

[关键词]

布局(Layout)，Flex，Grid，响应式设计(Responsive Design)

[提问]

Flex到底是何物？
如何使用Flex来复现你所见到的网页布局？
如何使用Flex轻松的来完成你自己网页布局？

[正文]

Flexbox

一. CSS - Flex

Flex，即Flexible Box，弹性化布局，Flex人见人爱，我见犹怜的独特之处正是弹性灵活。

Flex旨在容器，Flex布局可以被指定在任何一个容器，即使是行内元素。

.box {
  display: flex;
  display: -webkit-flex; /* Webkit内核浏览器如safari */
}

容器内部“所盛之物”就是Flex容器(flex container)子元素，即Flex项目(flex item)，Flex布局所操纵的正是这些项目，让这些项目按照自己的意愿随心所欲。

二. Flex布局关键点

容器和元素之间的关系图如下：

container & item

1. 关系解释

容器本身存在两根轴线(axis)：

main axis - 水平方向轴线
cross axis - 垂直方向轴线

两根轴各自对应两端点：

main start，main end
cross start，cross end

项目(flex item)按照轴线排列，可以水平，可以垂直(默认沿主轴排列即main axis)。单个项目占据的空间存在两种空间排列：

main size - 水平宽度
cross size - 垂直高度

2. 属性阐述

① 容器属性

flex-direction - [ row | row-reverse | column | column-reverse]

flex-wrap - [wrap | nowrap | wrap-reverse]

flex-flow - [flex-direction 和 flex-wrap]简写形式

justify-content - [flex-start | flex-end | center | space-between | space-around]

align-items - [flex-start | flex-end | center | baseline | stretch]

align-content - [flex-start | flex-end | center | space-between | space-around | stretch] 多跟轴线同时配置，如果只有一根轴线，该属性不起作用

容器属性直接决定内部项目的布局排列：

哪个方向

flex-direction
如何换行

flex-wrap
主轴线对齐方式(水平)

justify-content
交叉轴线对齐方式(垂直)

align-items

align-content

② 项目属性

order [排列顺序，默认是0，数值越小排列越靠前，允许负值]

flex-grow [是否放大，默认是0，值相同等分空间]

flex-shrink [是否缩小，默认是1即空间不足该项目自身缩小]

flex-basis [占据空间，可用百分比或是指定px]

flex [flex-grow flex-shrink flex-basis] 整体缩略写法

align-self [auto | flex-start | flex-end | center | baseline | stretch] 项目自身的排列方式可覆盖容器规定的方式

三. Flex - Demo练习

bbc.co.uk

Card Layout - Flex

Link : Card Layout

~~Demo详细分析待更......loading~~

Update Demo Analysis - 2018.3.4 ......Done

1. 布局分析

这个页面在一个大的“容器”内部，该容器内部由7个”项目“填充
每个项目也是一个容器(以项目为容器)，该容器内部是由多个元素(即以项目为容器的项目)进行填充的(子项目)包括标题，内容，图片，底部标签名

2. CSS写法

整体布局元素填充

    <div class="box">
        <div class="box-item">
        </div>
        <div class="box-item">
        </div>
        <div class="box-item">
        </div>
        <div class="box-item">
        </div>
        <div class="box-item">
        </div>
        <div class="box-item">
        </div>
        <div class="box-item">
        </div>
    </div>

*项目内部元素填充

        <div class="box-item">
            <div class="img img-bg1"></div>
            <h1>International Artist Feature: Malaysia</h1>
            <article>
                Duis aute irure dolor in reprehenderit in voluptate velit esse vcillum dolore. 
            </article>
            <span>&copy;Henry HE</span>
        </div>

box容器

    .box {
        background-color: white;
        box-shadow: 0 10px 5px rgba(0, 0, 0, 0.4);
        width: 85%; 
        margin: 0 auto;
        margin-top: 20px;
        padding: 5px;

        /* flex */
        display: flex; /* flex布局 */
        flex-direction: row; /* 方向row */
        flex-wrap: wrap; /* 允许换行 */
    }

box-item项目

    .box-item {
        /* flex */
        display: flex;
        flex-wrap: wrap;
        flex-direction: column; /* 方向column */
        align-items: flex-start; /* cross轴排列按照flex-start */

        min-height: 100%;
        
        /* 添加动态悬浮效果需要 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: all .2s ease-in;
        position: relative;

        margin: 5px;
        /* item */
        flex: 1; /*允许放大*/
    }

    /* 鼠标悬停浮动 */
    .box-item:hover {
        top: -2px;
        box-shadow: 0 5px 4px rgba(0, 0, 0, 0.2);
    }

以box-item为容器的子项目

    .img {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center center;
    }

    .box-item h1 {
        font-size: 30px;
        margin: 15px 20px;
        color: #333;
    }

    .box-item article {
        padding: 20px;
        line-height: 1.4;
        font-size: 1.6em;

        /* 使得article内部文字填充保证底部标签时钟处于底部 */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* 允许放大 */
        flex: 1;
    }

    .box-item span {
        font-size: 12px;
        font-weight: bold;
        color: #999;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 10px 20px;
    }

第一个box-item的展示宽度是其他的2倍

    /*
    * flex会自动计算其他项目的位置，只需要设定"不同"即可
    */
    .box-item:nth-child(1) {
        flex: 0 0 49.3%; /* flex-grow flex-shrink flex-basis*/
    }

配合媒介查询符合自己的响应式页面设计

    /* media query */
    @media only screen and (max-width: 610px) {
        .box-item:nth-child(1) {
            flex: 1;
        }
    }

    @media only screen and (max-width: 1179px) {
        .box-item:nth-child(1) {
            flex: 1 0 90%;
        }
    }

END
参考链接：

阮大神博客： Flex布局
Card Layout：仿照网页card模型
更多F.E.D. Demo练习：Github/Hongwing/FrontEndStudy