首页 > css教程 > 正文

关于css flex 的弹性布局

原创 2018-06-14 0 634
这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

案例基础布局

html

    <ul class="box">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>

css

        .box{
            display: -webkit-flex;
            display: flex;
        }
        .item{
            width: 200px;
            height: 300px;
            background: red;
            border: 1px solid #ccc;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            color:#fff;
        }

因为flex主要方便与移动端布局,所以测试以谷歌模拟移动端看效果:

因为使用 flex 布局,子元素默认是横向排列,所以不需要float,也不起作用;

父盒子属性探究

flex-direction

flex-direction 表示子元素的排列方向和顺序;默认 row (横排,左到右); row-reverse 表示 横排右到左

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction:row-reverse;    
        }

如果每个把每个 li 设置为 width:3000px;(当前屏幕宽度980px),效果:

子元素宽度超出,不但没有换行,会自动适应大小,平分为 25%;

上面的平分 只是在 row 的时候 会平分,如果是换成竖向排列:

flex-direction: column;

元素不会被挤压了,拥有3000px宽;但是要注意,它不是因为不够空间而换行了,只是column 值规定了它 竖向排列

下面的值可以调整为 倒序竖向排列

flex-direction: column-reverse; //表示元素竖直 反向排

flex-wrap

flex-wrap 默认 nowrap:不换行。上面的3000px 子元素正是因为 这个竖向默认是不会换行的,所以 上面设置3000px宽,不会换行;

同样的代码,如果加多一句

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;    //换行,第一行在上方。
        }

可以发现,设置为可以换行以后,子元素宽度变为100%屏幕宽了;这就像一个弹性盒子塞到了比自己小的盒子中,弹性盒子自动收缩了自己的宽度。

如果这样写:

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;    //换行,第一行在下方。
        }

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

flex-flow:row wrap  ===  flex-direction:row; flex-wrap: wrap

代码又改一下:

.box{
      display: -webkit-flex;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
    }
    
  可以写成

.box{
      display: -webkit-flex;
      display: flex;
      flex-flow:row-veverse wrap-reverse
    }

justify-content

它有五个值,其中如果把 item 比做word文档的文字的话, flex-star 可以看做是左对齐, flex-end: 右对齐; flex-center: 居中;

重点介绍值 space-around:平分内容空余空间,每个项目两侧的间隔相等;
设空余空间为 area,有子元素 k个,每个子元素等于增加了多少margin?==> area/2k

本例子:

.item{
    width:200px;
}
.box{
       display: -webkit-flex;
       display: flex;
       justify-content: space-around;
}

值得注意的是,项目之间的间隔比项目与边框的间隔大一倍。

space-between:两端对齐,项目之间的间隔都相等。不给

align-items

align 字样基本就知道它是针对 垂直方向的了;

.box{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            height: 1760px;
            align-items: center;

        }

记得给父加一个高度;这样子可以看出元素垂直居中了

其他的相似的属性就不再一一写了

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

看 baseline属性: 项目的第一行文字的基线对齐。

这个属性 比较新颖,可以试试:

.box{
     align-items: baseline;
     }
     
    <ul class="box">
        <li class="item" style="height: 150px;line-height: 150px">1</li>
        <li class="item" style="height: 500px;line-height: 500px">2</li>
        <li class="item" style="height: 250px;line-height: 250px">3</li>
        <li class="item" style="height: 170px;line-height: 170px">4</li>
    </ul>

上面我给每个item 都设置了 不同的高度 和 line-height;

可以看到 容器为了让文字对齐 而调整自己的位置;

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box{
            height: 1760px;   //高度要撑开
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap; //横排 换行;产生多轴

        }
        
        
<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

尝试添加 代码

align-content: flex-end;

align-content:space-around;

align-content:space-between;

align-content : center;

可以说,flex布局在父元素上对子元素垂直方向的控制还是非常到位和明确的;

子元素属性探究

order

大概可以理解为子元素的排队号码,默认都是0,越大排队越后;

<ul class="box">
        <li class="item" style="order:10">1</li>
        <li class="item" style="order:11">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

可以看到,1 号因为 order 设置为10排到了后面; 而2号因为更加大的order 而排到最后。

flex-grow 多余空间分配比例

它的值是一个number,默认为0;只要有一个同轴元素被设定了flex-grow ,所有多余空间都会按照这个比例分配,并让元素占满整行。这个被分配的空间,是算在自身里面的;

<ul class="box">
        <li class="item" style="flex-grow:1;">1</li>
        <li class="item" style="flex-grow:2;">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

盒子宽度变大了,(就是grow啦)

如果子元素有margin,那么会先计算横排多少个,再决定 flex-grow 分配的空间是多少

例如如下代码,

//没有设定 flex-grow 时
 <li class="item" style="flex-grow:0;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:0;">2</li>

//设定了 flex-grow 时
 <li class="item" style="flex-grow:2;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:1;">2</li>

所以,margin 并不算 多余空间 ,不会被重新分配;

flex-shrink

此属性与 flex-grow 有点相反的意思,用于处理 不换行时,内容超出屏幕了,应该决定谁来缩小;

值越大 缩小比例越大;默认是 1

改一下代码;

.box{
    flex-flow:row nowrap;
}

<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

此时 父盒子规定不能换行;但是5个item 宽度已经超过屏幕宽了;此时大家是等比缩小

下面设置1号 flex-shrink:600

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

可以看到,尽管我把1号设置到缩放非常大了,但是实际宽度并没有很小;说明浏览器会自己决定内容是否已经足够放下,够了就停止缩放;

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="flex-shrink:200;">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

当内容非常多时,1号就明显被缩放得非常厉害,同时我发现,4号尽管设置200,但是它的大小跟被设为600的 1号是一样的。

这是因为他们已经缩放到最后只能容纳文字的空间了;所以就不会再缩放下去;这跟文字占位一个道理

flex-basis

属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

简单来说,就是这个值会影响浏览器计算的输入值,有四种情况

1,本来就会超出,然后你设定的值比原值低(原值200px每个item),你的元素会被压缩。

 <ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

1,本来就会超出,然后你设定的值比原值大,你的元素会被相对放大些。

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

3 本来不会超出,你设定的值比原来小,你还是会小一点

 <ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

4 本来不会超出,你设定的值比原来大,你就会更大

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

这个值你可以当做宽度来看,当设定为 跟原来一样的值得时候,基本没有变化

<ul class="box">
        <li class="item" style="flex-basis:200px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>


align-self

此子元素单独设置垂直方向对齐方式;默认auto 表示父亲怎么定义就怎么来;其他值跟align-items是一样的

<ul class="box">
        <li class="item" style="align-self: center">1</li>
        <li class="item" style="align-self: flex-end">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item" style="align-self: center">5</li>
    </ul>

此属性主要是方便特殊定位 某个字元素

flex属性

是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

最后

移动端使用flex 布局感觉还是非常给力的,并且通常满足各个屏幕自适应的要求;有机会还是要多实践起来。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

CSS3的default伪类选择器的解析

用icon fonts来辅助CSS处理图片

以上就是关于css flex 的弹性布局的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:弹性盒子布局flex 弹性布局flex
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 昧光

      学生

    • 3442篇
      文章总数
    • 634
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新