Skip to content

CSS Flex布局 #41

New issue
New issue
Closed
Closed
CSS Flex布局#41
Labels
notes
@Wscats

Description

@Wscats
Wscats
opened on Jul 11, 2016 · edited by Wscats
Owner

样式如下
用flex和百分比同样做响应式布局，效果一样，但是方法不一样
传统布局方法一般是基于盒状模型的，通过display属性,position属性和float属性达到目的。它这对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

这里header相当于一个flex的盒模型，里面的div根据这个盒做相应的改变

body {
            margin: 0;
            padding: 0;
        }

        /*flex方法*/
        .header {
            display: flex;
            /*设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/
            flex-direction: row;
            background-color: #c5c5c5;
            width: 100%;
        }

        .header div {
            text-align: center;
            flex: 1;
        }
        /*百分比方法*/
        .headerPer{
            background-color: #c5c5c5;
            width: 100%;
            float: left;
        }

        .headerPer div{
            float: left;
            width: 25%;
            text-align: center;
        }

    </style>

    <body>
        <header class="header">
            <div>左边</div>
            <div>中间</div>
            <div>中间</div>
            <div>右边</div>
        </header>

        <header class="headerPer">
            <div>左边</div>
            <div>中间</div>
            <div>中间</div>
            <div>右边</div>
        </header>
    </body>

上面flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。比如上面就把每个div分成四个1，每个占四份之一

flex设置为1就是默认设置flex-grow，flex-shrink和flex-basis属性值

  • flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
  • flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
  • flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

flex-basis属性用于设置或检索弹性盒伸缩基准值
注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用
如果用JS写的话就用这种

<script> var divs = document.getElementsByTagName("div"); console.log(divs); divs[2].style.flexBasis="200px"; </script>

注意：display: box; 是 2009版本. display: flex;是2011修订版

Activity

Wscats

Wscats commented on Jul 11, 2016

@Wscats
Wscats
on Jul 11, 2016
OwnerAuthor

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}
Wscats

Wscats commented on Jul 11, 2016

@Wscats
Wscats
on Jul 11, 2016 · edited by Wscats
OwnerAuthor

我们可以对header盒子增加一个
flex-direction: row-reverse;
他可以有以下的值

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

flex-direction:initial;设置默认值为row
flex-direction:inherit;从父元素继承该属性

Wscats

Wscats commented on Jul 14, 2016

@Wscats
Wscats
on Jul 14, 2016 · edited by Wscats
OwnerAuthor

参考：Flex 布局教程：实例篇
参考：Wsscat的例子

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        section {
            display: flex;
            width: 120px;
            height: 120px;
            background-color: antiquewhite;
        }
        section span:nth-of-type(1) {
            border-radius: 10px;
            display: block;
            width: 32px;
            height: 32px;
            margin: 4px;
            background-color: black;
            align-self:center;
        }

        section span:nth-of-type(2) {
            border-radius: 10px;
            display: block;
            width: 32px;
            height: 32px;
            margin: 4px;
            background-color: black;
            align-self:center;
        }
    </style>

    <body>
        <section>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </section>
    </body>
</html>
Wscats

Wscats commented on Jul 14, 2016

@Wscats
Wscats
on Jul 14, 2016
OwnerAuthor

写了个比较全的DEMO

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
        <title>Wsscat的flex布局DEMO</title>
    </head>
    <style>
        /*display: box; 是 2009版本. display: flex;是2011修订版*/
        /*初始化*/

        * {
            margin: 0;
            padding: 0;
        }
        /*设置了box属性 321*/

        .article1 {
            width: 600px;
            height: 200px;
            display: -moz-box;
            display: -webkit-box;
            display: box;
        }

        .sectionOne {
            background: orange;
            -moz-box-flex: 3;
            -webkit-box-flex: 3;
            box-flex: 3;
        }

        .sectionTwo {
            background: purple;
            -moz-box-flex: 2;
            -webkit-box-flex: 2;
            box-flex: 2;
        }

        .sectionThree {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
            background: green;
        }
        /*不设置flex属性*/

        .article2 section:nth-of-type(1) {
            background: orange;
            /*因为父元素没有设置 display: box;属性，所以不生效
             在这里就白白设置了
             * */
            -moz-box-flex: 2;
            -webkit-box-flex: 2;
            box-flex: 2;
        }

        .article2 section:nth-of-type(2) {
            background: purple;
        }

        .article2 section:nth-of-type(3) {
            background: green;
        }
        /*设置的flex属性 321*/

        .article3 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
        }

        .article3 section:nth-of-type(1) {
            background: orange;
            flex: 3;
        }

        .article3 section:nth-of-type(2) {
            background: purple;
            flex: 2;
        }

        .article3 section:nth-of-type(3) {
            background: green;
            flex: 1;
        }
        /*用百分比*/

        .article4 {
            width: 600px;
            height: 200px;
            float: left;
        }

        .article4 section:nth-of-type(1) {
            height: 200px;
            background: orange;
            /*3:6*/
            width: 50%;
            float: left;
        }

        .article4 section:nth-of-type(2) {
            height: 200px;
            background: purple;
            /*2:6*/
            width: 33.3%;
            float: left;
        }

        .article4 section:nth-of-type(3) {
            height: 200px;
            background: green;
            /*1:6*/
            width: 16.6%;
            float: left;
        }

        .article5 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
        }

        .article5 section:nth-of-type(1) {
            background: orange;
            width: 50%;
            /*变成了42.9%*/
        }

        .article5 section:nth-of-type(2) {
            background: purple;
            width: 33.3%;
            /*变成了28.56*/
        }

        .article5 section:nth-of-type(3) {
            background: green;
            width: 33.3%;
            /*变成了28.56*/
            /*超出了16.6%*/
            /*然后对超出的这16.6做一个分配;*/
            /*16.6*(50%/116%) = 7.1;*/
            /*16.6*(33.3%/116%) = 4.74;*/
        }

        .article6 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
        }

        .article6 section:nth-of-type(1) {
            background: orange;
            flex: 3;
        }

        .article6 section:nth-of-type(2) {
            background: purple;
            flex: 2;
        }

        .article6 section:nth-of-type(3) {
            background: green;
            flex: 1;
        }

        .article7 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
        }

        .article7 section:nth-of-type(1) {
            background: orange;
            flex: 3;
        }

        .article7 section:nth-of-type(2) {
            background: purple;
            flex: 2;
        }

        .article7 section:nth-of-type(3) {
            background: green;
            flex: 1;
        }

        .article8 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            flex-direction: column-reverse;
        }

        .article8 section:nth-of-type(1) {
            background: orange;
            flex: 3;
        }

        .article8 section:nth-of-type(2) {
            background: purple;
            flex: 2;
        }

        .article8 section:nth-of-type(3) {
            background: green;
            flex: 1;
        }

        .article9 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
        }

        .article9 section:nth-of-type(1) {
            background: orange;
            width: 300px;
        }

        .article9 section:nth-of-type(2) {
            background: purple;
            width: 200px;
        }

        .article9 section:nth-of-type(3) {
            background: green;
            width: 200px;
        }

        .article10 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap-reverse;
        }

        .article10 section:nth-of-type(1) {
            background: orange;
            width: 300px;
        }

        .article10 section:nth-of-type(2) {
            background: purple;
            width: 200px;
        }

        .article10 section:nth-of-type(3) {
            background: green;
            width: 200px;
        }

        .article11 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            flex-flow: column wrap-reverse;
        }

        .article11 section:nth-of-type(1) {
            background: orange;
            flex: 3;
        }

        .article11 section:nth-of-type(2) {
            background: purple;
            flex: 2;
        }

        .article11 section:nth-of-type(3) {
            background: green;
            flex: 1;
        }

        .article12 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
        }

        .article12 section:nth-of-type(1) {
            background: orange;
            width: 100px;
        }

        .article12 section:nth-of-type(2) {
            background: purple;
            width: 100px;
        }

        .article12 section:nth-of-type(3) {
            background: green;
            width: 100px;
        }

        .article13 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
        }

        .article13 section:nth-of-type(1) {
            background: orange;
            width: 100px;
        }

        .article13 section:nth-of-type(2) {
            background: purple;
            width: 100px;
        }

        .article13 section:nth-of-type(3) {
            background: green;
            width: 100px;
        }

        .article14 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }

        .article14 section:nth-of-type(1) {
            background: orange;
            width: 100px;
        }

        .article14 section:nth-of-type(2) {
            background: purple;
            width: 100px;
        }

        .article14 section:nth-of-type(3) {
            background: green;
            width: 100px;
        }

        .article15 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
        }

        .article15 section:nth-of-type(1) {
            background: orange;
            width: 100px;
        }

        .article15 section:nth-of-type(2) {
            background: purple;
            width: 100px;
        }

        .article15 section:nth-of-type(3) {
            background: green;
            width: 100px;
        }

        .article16 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            background-color: #D7D7D7;
        }

        .article16 section:nth-of-type(1) {
            background: orange;
            width: 300px;
            height: 50px;
        }

        .article16 section:nth-of-type(2) {
            background: purple;
            width: 200px;
            height: 50px;
        }

        .article16 section:nth-of-type(3) {
            background: green;
            width: 200px;
            height: 50px;
        }

        .article17 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            align-items:flex-end;
            background-color: #D7D7D7;
        }

        .article17 section:nth-of-type(1) {
            background: orange;
            width: 300px;
            height: 50px;
        }

        .article17 section:nth-of-type(2) {
            background: purple;
            width: 200px;
            height: 50px;
        }

        .article17 section:nth-of-type(3) {
            background: green;
            width: 100px;
            height: 50px;
        }

        .article18 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            align-items:center;
            background-color: #D7D7D7;
        }

        .article18 section:nth-of-type(1) {
            background: orange;
            width: 300px;
            height: 50px;
        }

        .article18 section:nth-of-type(2) {
            background: purple;
            width: 200px;
            height: 50px;
        }

        .article18 section:nth-of-type(3) {
            background: green;
            width: 100px;
            height: 50px;
        }

        .article19 {
            width: 600px;
            height: 200px;
            display: -moz-flex;
            display: -webkit-flex;
            display: flex;
            background-color: #D7D7D7;
        }

        .article19 section:nth-of-type(1) {
            background: orange;
            width: 300px;
            height: 50px;
            align-self:center;
        }

        .article19 section:nth-of-type(2) {
            background: purple;
            width: 200px;
            height: 50px;
            align-self:flex-end;
        }

        .article19 section:nth-of-type(3) {
            background: green;
            width: 100px;
            height: 50px;
            align-self:flex-start;
        }
    </style>

    <body>
        <!--设置display: box;-->
        <p>设置display: box</p>
        <article class="article1">
            <section class="sectionOne">1</section>
            <section class="sectionTwo">2</section>
            <section class="sectionThree">3</section>
        </article>

        <!--不设置 display: box;-->
        <p>不设置 display: box;</p>
        <article class="article2">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <!--设置display: flex;-->
        <p>设置display: flex;</p>
        <article class="article3">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <!--用百分比-->
        <p>用百分比</p>
        <p>细心的会发现我们右边还有大概0.01%的宽度没有填充（由于是100不能完全等分三分），这就是使用百分比不好的一种表现</p>
        <article class="article4">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <!--用百分比结合flex-->
        <p style="float: left;">用百分比结合flex(溢出情况)</p>
        <p>事实上这里可以不对父元素写display:flex</p>
        <article class="article5">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:row-reverse</p>
        <article class="article6">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:column</p>
        <article class="article7">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:column-reverse</p>
        <article class="article8">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;固定值溢出的情况;它默认是flex-wrap:nowrap，现在设置成wrap</p>
        <article class="article9">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;固定值溢出的情况;它默认是flex-wrap:nowrap，现在设置成wrap-reverse</p>
        <article class="article10">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;固定值溢出的情况;它默认是flex-flow:row nowrap，其实就是flex-direction和flex-wrap合并在一起写，现在设置成colum wrap-reverse</p>
        <article class="article11">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:flex-end</p>
        <article class="article12">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:center</p>
        <article class="article13">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:space-between</p>
        <article class="article14">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:space-around</p>
        <article class="article15">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;宽度溢出的情况;高度不溢出并上下有空余部分;它默认是align-content:flex-start,现在设置成align-content:flex-start;注意：这属性在只有一行的伸缩容器上没有效果</p>
        <article class="article16">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;宽度不溢出的情况;高度不溢出并上下有空余部分;它默认是align-items:flex-start,现在设置成align-items:flex-end;注意：这属性在一行的伸缩容器上是有效果的</p>
        <article class="article17">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>设置display: flex;宽度不溢出的情况;高度不溢出并上下有空余部分;它默认是align-items:flex-start,现在设置成align-items:center;注意：这属性在一行的伸缩容器上是有效果的</p>
        <article class="article18">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>

        <p>定义flex子项单独在侧轴（纵轴）方向上的对齐方式,意思就是之前我们定义的位置都是针对父元素article来写定位样式，但align-self却可以对子元素section进行单独的定位</p>
        <article class="article19">
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </article>
    </body>

</html>
Wscats
added
notes
on Jul 14, 2016
Wscats

Wscats commented on Jul 16, 2016

@Wscats
Wscats
on Jul 16, 2016 · edited by Wscats
OwnerAuthor

参考：Wsscat的例子

Wscats
closed this as completedon Aug 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    notes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Wscats

        Issue actions
          CSS Flex布局 · Issue #41 · Wscats/articles