图片 6

flexbox简介,flexbox

Posted by

我就是要用CSS实现

2016/01/15 · CSS ·
CSS

原文出处:
AlloyTeam   

flexbox简介,flexbox

写在最前

我们都是前端工程师,无论你现在是页面仔,还是Node服务开发者,抑或是全端大神,毋庸置疑的是,我们都是前端工程师,我们生来就对追求页面的极致拥有敏锐的触觉,无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现,都是我们孜孜不倦的追求目标。即使这些在别人眼里,只是跟其他的页面一样没什么不同,但我们却能为其中那只有我们才知道的一抹别致而窃喜。

而今天我要讲的,就是我们最熟悉的老朋友,CSS。不讲枯燥的语法,抛开js,让我们一起来看业务中那别致的纯CSS实现,让我们一起来追求那更好的页面实现,希望我带着你走完这段旅程后,你能收获一些惊喜甚至灵感。

一、概述

浮动在移动布局中不再重要,flex盒模型越来越重要。

flexbox经历过三个版本,主要区别是2009年到2012年之间的语法变化。

最新的语法和现在规范是同步的(例display:flex和“flex-{*}”属性)。
在这之间的语法是2011年出现的非官方语法,只能被IE识别(例display:flexbox;display: -ms-flexbox)。
最老的语法产生于2009年(例display: box;或者“box-{*}”属性)

flexbox是css3新增盒子模型,可以实现复杂的布局。flexbox没有得到firefox,Opera,chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz),opera(-o),chrome/safari(-webkit)。

flexbox经典的布局应用是垂直等高,水平均分,按比例划分。

WHY,为什么

“我有很多事要做诶,忙都忙不过来,难道我要在这CSS上面浪费很多时间?”

不,不,不,我们要做的事情,当然不会只是满足技术的追求,而是会有实质的好处的!

我的观点如下:

  1. CSS跟UI结合更加紧密;
  2. 用CSS来实现,能减少JS计算,减少样式修改,减少重绘,提升渲染效率;
  3. 用CSS实现的,是一种模块化,更符合Web Components组件化思想,shadow
    DOM不就是致力于这么做么;
  4. 咱最爱的,逼格更高~

 

二、flexbox常用属性

WHEN,何时

“我懂了,看起来是有那么点意思,可是我什么时候能用CSS来做大事啊?”

在我看来:

  1. 实现的对象是非交互性UI;
  2. 这么做不会给你带来过量的DOM。要知道最不能忍受的,就是臃肿的页面;
  3. 这么做能完美实现UI、能覆盖所有场景,否则设计跟产品不服。

什么是非交互性UI,就是不会在用户触发了某种行为时,哗啦啦来个闪瞎眼的交互,吓得用户直接高潮,而是从页面渲染后,就一直在那里,那么安静,那么美的女子,哦不,UI。

 

1、用于父元素的样式

  • display:block;该属性会将此元素及其直系子代加入弹性框模型中。(flexbox模型只适用于直系子代)
  • box-orient:horizontal|vertical|inline-axis|block-axis|inherit;该属性定义父元素中的子元素是如何排列的。horizontal对父元素的宽度分配划分。
  • box-pack:start|end|center|justify;box-pack表示父容器里面子容器的水平对齐方式

图片 1

  • box-align:start|end|center|baseline|stretch;表示父容器里面子容器的垂直对齐方式。

图片 2

HOW,该怎么做

“可是我还是不懂该如何做才能这么有逼格”

我个人的见解:

  1. 布局之美,理解透盒子模型,熟悉各种布局,不要忘了这是咱的根本;
  2. 自适应之美,放心交给浏览器去做,我们要做的,是思考规则;
  3. Magic,新技术及小技巧,总能在某一刹那给你最需要的援助;
  4. 前人之鉴,坑王之王,你已经身经百战了,还怕什么。

这些就是我总结出你要用CSS来实现一个别人想不到的东西时,应该具有素质。最重要的还是思考,因为没有一个东西是绝对最好的,我们总在前进。

图片 3

下面就以两个手机QQ实际业务的例子,带领大家感受一下CSS的魅力。

 

2、用于子元素的样式

  • box-flex:0|任意数字;该属性让子容器针对父容器的宽度按一定规则进行划分。 

一、手Q吃喝玩乐  好友去哪儿九宫格图

下图是手Q吃喝玩乐  好友去哪儿九宫格图的图示:

图片 4

 

从上图我们可以分析出如下需求:

  • 图片大小自适应;
  • 图片个数不同时,图片按照指定方式排列;
  • 图片相邻处有1px空白间隙。

我们以最复杂的6图布局为例,一步一步来看如何以纯CSS实现。

三、快速入门demo

float布局

最容易想到的,也是最简单的方案,就是 float 布局:

  • 图片大小自适应:宽度百分比,高度使用 padding-top 百分比
  • 图片个数不同时,图片按照指定方式排列:使用 nth-child
    伪类指定不同情况下的元素大小
  • 图片相邻处有1px空白间隙:使用 border-box + border模拟边框

这里父元素的高度未知,height使用百分比行不通,而padding的百分比值是依据父元素的宽度来计算的,我们可以使用padding-top撑开高度。

让我们一瞅伪码,猛击我看demo

XHTML

<div class=”float”> <div class=”item”>1</div> …
<div class=”item”>6</div> </div>

1
2
3
4
5
<div class="float">
    <div class="item">1</div>
    …
    <div class="item">6</div>
</div>

 

CSS

.float { overflow: hidden; } .item { float: left; padding-top: 33.3%;
width: 33.3%; border-right: 1px solid #fff; border-top: 1px solid
#fff; } .item:nth-child(1) { padding-top: 66.6%; width: 66.6%; }
.item:nth-child(2), .item:nth-child(3), .item:nth-child(6) {
border-right: 0 none; } .item:nth-child(1), .item:nth-child(2) {
border-top: 0 none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.float {
    overflow: hidden;
}
.item {
    float: left;
    padding-top: 33.3%;
    width: 33.3%;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
}
.item:nth-child(1) {
    padding-top: 66.6%;
    width: 66.6%;
}
.item:nth-child(2), .item:nth-child(3), .item:nth-child(6) {
    border-right: 0 none;
}
.item:nth-child(1), .item:nth-child(2) {
    border-top: 0 none;
}

 

实际效果并不理想,如下图:

图片 5

可以看到 float
布局的优点是DOM结构十分简单,缺点是容易出现空白间隙错位,优缺点都十分明显,它更适用于js计算的版本。

1、子元素水平排列,按比例分割父元素宽度

.parent宽度500px,其子元素水平排列,child-one占1/6,child-two占2/6,child-three占了3/6。

<style>
        .parent{
            width: 500px;
            height: 200px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */
        }
        .child-one{
            background: lightblue;
            -webkit-box-flex: 1;
        }
        .child-two{
            background: lightgray;
            -webkit-box-flex: 2;
        }
        .child-three{
            background: lightgreen;
            -webkit-box-flex: 3;
        }
    </style>
</head>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->
    <div class="parent">
        <div class="child-one">1</div>
        <div class="child-two">2</div>
        <div class="child-three">3</div>
    </div>
</div>

图片 6

flex布局

还有谁?flex!flex布局有以下重要特性

  • 可以将 flex 布局下的元素展示在同一水平、垂直方向上;
  • 可以支持自动换行、换列(移动端-webkit-box暂不支持,好消息是从iOS9.2、Android4.4开始都支持新flex了);
  • 可以指定 flex
    布局下的元素如何分配空间,可以让元素自动占满父元素剩余空间;
  • 可以指定 flex 布局下的元素的展示方向,排列方式。

这里面的子元素同一水平、垂直方向展示对我们很有帮助,它使我们更容易控制子元素的排列,而不会错位。

使用 flex 布局与 float
布局不同的地方在于,移动端目前主要还是-webkit-box,因此图片个数不同时,我们需要使用不同的html,组合出不同的块。

2、子元素水平排列,一个子元素定宽,剩余子元素按比例分割

图片 7<style>
.parent{ width: 500px; height: 200px; display: -webkit-box;
background-color:pink; -webkit-box-orient: horizontal;/*
虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */ }
.child-one{ background: lightblue; -webkit-box-flex: 1; } .child-two{
background: lightgray; -webkit-box-flex: 2; } .child-three{ background:
lightgreen; /*定宽,并加上左右margin,父元素加上粉色背景色更好理解*/
width:150px; margin:0 15px; } </style> </head> <div
style=”display: -webkit-box;-webkit-box-pack: center;border: 1px solid
#000;”><!—webkit-box-pack:center让.parent水平居中–> <div
class=”parent”> <div class=”child-one”>1</div> <div
class=”child-two”>2</div> <div
class=”child-three”>3</div> </div> </div> View Code

图片 8

flex 布局上下划分

来,我们快动手分块吧!新解决方案出现导致的肾上腺素上升,使我们迫不及待使用了传统css文档流自上而下的方式来划分,我称为上下划分,如下图:

图片 9

上面一块包含左侧1个2/3的大块,右侧2个1/3的小块,下面一块则是3个1/3的小块。

我们指定2/3的大块宽度是66.6%,1/3的小块宽度是33.3%(实际可以使用-webkit-box-flex来分配,这里为了下面的计算方便)。

来看下实际效果,你也可以猛击demo来查看源码:

图片 10

demo中我们看到中间那条竖空白间隙错位了,为什么?按照预期我们上面块左侧宽度66.6%,下面块左侧宽度33.3%

  • 33.3%,两个宽度应该相等才对。

然而我们忽略了flex一个重要特性,子元素会自动占满父元素剩余空间,这时子元素宽度计算受flex控制,下面块的3个子元素宽度计算并非一定是相等的,会有些许差异,此时66.6%
!= 33.3% + 33.3%

怎么破!别急,我们刚刚只是受到了肾上激素的影响,让我们冷静下来重新思考如何划分。

3、子元素垂直排列,分割父元素高度

.parent中的子元素垂直排列,所以每个子元素宽度占100%。

图片 11<style>
.parent{ width: 400px; height: 600px; display: -webkit-box;
background-color:pink; -webkit-box-orient: vertical;/*子元素垂直排列
*/ } .child-one{ background: lightblue; -webkit-box-flex: 1; }
.child-two{ background: lightgray; -webkit-box-flex: 2; } .child-three{
background: lightgreen;
/*定高,有上下margin,父元素加上粉色背景色更好理解*/ height:200px;
margin:15px 0; } </style> </head> <div style=”display:
-webkit-box;-webkit-box-pack: center;border: 1px solid
#000;”><!—webkit-box-pack:center让.parent水平居中–> <div
class=”parent”> <div class=”child-one”>1</div> <div
class=”child-two”>2</div> <div
class=”child-three”>3</div> </div> </div> View Code

图片 12

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注