登录  /  注册

CSS3 Flex布局 Flexbox的属性详解_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:38:44
原创
995人浏览过

原文:a visual guide to css3 flexbox properties

Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。

很多的设计师和开发者发现Flex布局很容易使用,它定位元素简单因此很多复杂的布局能够用很少的代码实现,引领更简单的开发过程。Flex布局的算法是基于方向的,不同于基于水平或者垂直的block和inline布局,这种Flex布局可以被用在小的应用组件中,而CSS3 网格布局模型是新兴处理大规模的布局。

本文主要讲解flex的每个属性怎样栩栩如生的影响布局。

1、基本概念:


在开始描述Flexbox属性之前,我们先小小的介绍一下Flexbox模型,Flex布局由父容器称为Flex容器(flex-container)和它直接的子元素称为flex 项目(flex-item)构成,在下文中将它们简称为“容器”和“项目”。



在上图中你可以看到用来描述Flex容器和它的子元素的属性和术语,你可以阅读W3C的官方文档来了解他们的意思。

  • flex容器有两个参考的轴:水平的主轴(main axis)和交叉的轴(cross axis)。
  • 主轴的开始位置main start,主轴结束位置main end;
  • 交叉轴的开始位置叫做cross start,结束位置叫做cross end;
  • 直接子元素“项目”沿主轴排列;
  • 单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
  • Flexbox是2009年W3C提出的新布局方案,这里用的是2014年10月的最新标准,它的最新的浏览器支持情况

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (prefixed with -webkit-)
  • Android 4.4+
  • iOS 7.1+ (prefixed with -webkit-)
  • 2、用法:

    使用flex布局首先在HTML中的父元素上设置display属性:

    .flex-container {    display: -webkit-flex; /* Safari */    display: flex;}
    登录后复制
    或者你想让它像内联元素一样,可以这样写:
    .flex-container {  display: -webkit-inline-flex; /* Safari */  display: inline-flex;}
    登录后复制

    注意:这是唯一的要设置在父容器上的属性,所有的直接子元素会成为自动flex项目。

    3、flexbox 容器的属性:

    flex-direction:row(默认值) | row-reverse | column | column-reverse;
    登录后复制
    该属性指定了Flex的项目怎样在flex容器中排列,设置flex容器的主轴方向,它们(项目)两个主要的方向排列,就像一行一样水平排列或者像一列一样垂直排列。

    values:

    .flex-container {  -webkit-flex-direction: row; /* Safari */  flex-direction:         row;}
    登录后复制
    row 方向表明flex项目在一行中从左到右堆放在容器中。


    .flex-container {  -webkit-flex-direction: row-reverse; /* Safari */  flex-direction:         row-reverse;}
    登录后复制
    row-reverse 方向表明flex项目从右到左堆放。



    .flex-container {  -webkit-flex-direction: column; /* Safari */  flex-direction:         column;}
    登录后复制

    column 方向指明flex项目在一列中从顶部到底部堆放



    .flex-container {  -webkit-flex-direction: column-reverse; /* Safari */  flex-direction:         column-reverse;}
    登录后复制

    column-reverse 方向指明flex项目在一列中从底到顶部堆放



     flex-wrap:nowrap(默认值) | wrap | wrap-reverse;
    登录后复制
    初始情况下,Flexbox的理念是所有的项目都排列在一条线上(轴线),flex-wrap 属性控制容器是否将它的项目排列在一行或者多行,并且控制新行堆叠的方向。

    values:

    .flex-container {  -webkit-flex-wrap: nowrap; /* Safari */  flex-wrap:         nowrap;}
    登录后复制
    flex项目会排列在一条线上并且它们会缩放适应到容器的宽。



    .flex-container {  -webkit-flex-wrap: wrap; /* Safari */  flex-wrap:         wrap;}
    登录后复制

    项目(flex items)会在多行展示,如果需要的话它们可以从左到右或者从上到下排列。



    .flex-container {  -webkit-flex-wrap: wrap-reverse; /* Safari */  flex-wrap:         wrap-reverse;}
    登录后复制



     flex-flow: <flex-direction> || <flex-wrap>;</flex-wrap></flex-direction>
    登录后复制
    该属性是上面两个属性的简写方式,前一个参数设置flex-direction,后一个参数设置flex-wrap;

    values:

    .flex-container {  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */  flex-flow:         <flex-direction> || <flex-wrap>;}</flex-wrap></flex-direction></flex-wrap></flex-direction>
    登录后复制

    默认值: row nowarp

     justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;
    登录后复制

    定义了项目在容器主轴上的对齐方式,当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。

    values:


    .flex-container {  -webkit-justify-content: flex-start; /* Safari */          flex-start;}
    登录后复制

    所有项目向容器的左边对齐



    登录后复制
    .flex-container {  -webkit-justify-content: flex-end; /* Safari */  justify-content:         flex-end;}
    登录后复制
    所有项目向容器的右边对齐




    .flex-container {  -webkit-justify-content: center; /* Safari */  justify-content:         center;}
    登录后复制
    所有项目在容器中居中对齐




    .flex-container {  -webkit-justify-content: space-between; /* Safari */  justify-content:         space-between;}
    登录后复制

    第一个和最后一个项目向容器的边界对齐,剩余的空间各个项目等分



    .flex-container {  -webkit-justify-content: space-around; /* Safari */  justify-content:         space-around;}
    登录后复制
    所有的项目等分剩余的容器空间,包括第一个和最后一个项目(所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍)。




     align-items:flex-start | flex-end | center | baseline | stretch(默认值);
    登录后复制

    定义项目在交叉轴上的对齐方式,交叉轴与当前的轴线有关系,与justify-content很相似,只不过是垂直方向的;这属性为所有的项目设置默认的交叉轴上的对齐方式,包括匿名的。

    values:

    .flex-container {  -webkit-align-items: stretch; /* Safari */  align-items:         stretch;}
    登录后复制
    项目会填充容器的整个高或者宽(fill the whole height ),从容器交叉轴的起点到交叉轴的结束点。




    .flex-container {  -webkit-align-items: flex-start; /* Safari */  align-items:         flex-start;}
    登录后复制

    项目会堆放在容器交叉轴的起始位置(cross start )。



    .flex-container {  -webkit-align-items: flex-end; /* Safari */  align-items:         flex-end;}
    登录后复制
    项目会堆放在容器交叉轴的结束位置(cross end )。



    .flex-container {  -webkit-align-items: center; /* Safari */  align-items:         center;}
    登录后复制

    项目会堆放在容器交叉轴的居中位置( center of the cross axis )



    .flex-container {  -webkit-align-items: baseline; /* Safari */  align-items:         baseline;}
    登录后复制
    所有项目的基线会对齐


    基线?不知道基线是什么请戳这里-->基线是什么?



     align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);
    登录后复制
    当交叉轴上还有多余的空间时它定了多行的对齐方式,类似justify-content在主轴上对齐所有项目的方式一样。

    values:

    .flex-container {  -webkit-align-content: stretch; /* Safari */  align-content:         stretch;}
    登录后复制
    每一行的项目后面等比分配了交叉轴上的多余空间。



    .flex-container {  -webkit-align-content: flex-start; /* Safari */  align-content:         flex-start;}
    登录后复制
    项目在容器的交叉轴起始点上堆放在一起。




    .flex-container {  -webkit-align-content: flex-end; /* Safari */  align-content:         flex-end;}
    登录后复制
    项目在容器的交叉轴结束点上堆放在一起。




    .flex-container {  -webkit-align-content: center; /* Safari */  align-content:         center;}
    登录后复制
    项目的行被堆放在容器的交叉轴线中间。




    .flex-container {  -webkit-align-content: space-between; /* Safari */  align-content:         space-between;}
    登录后复制
    与justify-content类似,项目的行距离在容器的交叉轴线上被等分,第一行和末尾的一行与容器的边缘对齐。



    .flex-container {  -webkit-align-content: space-around; /* Safari */  align-content:         space-around;}
    登录后复制
    与justify-content类似,项目的行等分了容器的交叉线上的剩余空间,第一行和最后一行同样也得到了一些,它们之间的间隔比首行和末行到容器边界的间隔大一倍。


    注意:这个属性仅仅当容器中有多行的项目时有效,如果所有项目仅仅占一行,那这个属性对布局没有任何影响。


    4、Flexbox 项目属性

    <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></integer></span>
    登录后复制
    order属性控制容器的直接子元素在容器中的顺序,默认在容器中这些项目是以该数字递增的方式排列的。

    values:

    values:.flex-item {  -webkit-order: <integer>; /* Safari */  order:         <integer>;}</integer></integer>
    登录后复制
    该属性可以很简单的控制项目的顺序,而不用在HTML代码里面做调整。这个整形值可以为负数,默认值是 0。



    <span style="font-size:14px;">flex-grow: <number></number></span>
    登录后复制
    该属性指定项目的生长因素,它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。
    values:

    .flex-item {  -webkit-flex-grow: <number>; /* Safari */  flex-grow:         <number>;}</number></number>
    登录后复制


    当所有的项目的flex-grow值相等的时候它们的size相同。


    第二个项目占用了更多的剩余空间。

    默认值是:0
    注意:负数在这个属性中是没有用的



    flex-shrink: <number></number>
    登录后复制
    该属性指定了项目的收缩因素,它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

    values:

    .flex-item {  -webkit-flex-shrink: <number>; /* Safari */  flex-shrink:         <number>;}</number></number>
    登录后复制


    默认情况下,所有的项目都会收缩,但是当我们设置该属性的值为0的时候,项目会保持原有的大小。


    默认值是:1
    注意:负数在这个属性中是没有用的



    flex-basis:auto | <width></width>
    登录后复制
    该属性的值和width和height的取值一样,在 flex factors分配剩余空间之前指定项目的初始的大小。


    values:

    .flex-item {  -webkit-flex-basis: auto | <width>; /* Safari */  flex-basis:         auto | <width>;}</width></width>
    登录后复制

    默认值:auto



    flex:none | auto | [ <flex-grow><flex-shrink>? || <flex-basis> ]</flex-basis></flex-shrink></flex-grow>
    登录后复制
    该属性是flex-grow, flex-shrink 和flex-basis的缩写形式,同时属性值也有简写:auto表示(1,1,auto),none表示(0,0,auto)


    values:

    .flex-item {  -webkit-flex: none | auto | [ <flex-grow><flex-shrink>? || <flex-basis> ]; /* Safari */  flex:         none | auto | [ <flex-grow><flex-shrink>? || <flex-basis> ];}</flex-basis></flex-shrink></flex-grow></flex-basis></flex-shrink></flex-grow>
    登录后复制

    注意: W3C鼓励使用flex的简写形式,因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。



    align-self:auto | flex-start | flex-end | center | baseline | stretch;
    登录后复制
    该属性和容器的align-items属性有同样的作用,它是用在单一的项目上的,可以完全压倒容器中align-items定义的对齐方式。
    values:

    .flex-item {  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */  align-self:         auto | flex-start | flex-end | center | baseline | stretch;}
    登录后复制


    注意:auto 表示项目会使用父元素(容器)的align-items的值,如果该项目没有父元素的话align-self的值是stretch。

    flex items值得注意的是:float、clear、vertical-align这些属性对于项目(flex item)会失效。



    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号