• 紫光阁中共中央国家机关工作委员会 2020-02-23
  • 看见什么有用?[猜想] 2020-02-23
  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!



      2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能
     
      1.什么是flex布局?
     
      Flex是FlexibleBox的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性.
     
      flex布局:.box{display:flex;}
     
      行内元素也可以使用flex布局:.box{display:inline-flex;}
     
      Webkit内核的浏览器,必须加上-webkit前缀:.box{display:-webkit-flex;display:flex;}
     
      注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
     
      2.基本概念
     
      Flex容器(flexcontainer):采用Flex布局的元素,称为flex容器.
     
      Flex项目(flexitem):flex容器的所有子元素,自动成为容器成员,即flex项目.
     
      容器的两根轴线:水平的主轴(mainaxis),垂直的交叉轴(crossaxis).
     
      主轴(mainaxis):开始位置->mainstart,结束位置->mainend,项目默认沿主轴排列.
     
      交叉轴(crossaxis):开始位置->crossstart,结束位置->crossend
     
      容器内的单个项目占据的主轴空间叫做->mainsize,交叉轴空间叫做->crosssize
     
      3.FLex属性
     
      flex属性分为容器属性和项目属性.
     
      容器属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
     
      项目属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self
     
      3.1容器属性
     
      flex-direction:决定主轴的方向(即项目排列方向)
     
      row:水平方向,从左到右.(默认属性)
     
      row-reverse:水平方向,从右到左.
     
      column:垂直方向,从上到下.
     
      column-reverse:垂直方向,从下到上.
     
      flex-wrap:规定一条轴线排不下,如何换行.
     
      nowrap:不换行(默认属性)
     
      wrap:换行,第一行在上边
     
      wrap-reverse:换行,第一行在下边,(只行数排列相反,单行内依旧从左到右排列,每一行都是).
     
      flex-flow:结合flex-direction和flex-wrap,写法如下
     
      .box{flex-flow:columnwrap-reverse}
     
      justify-content:定义项目在主轴上的对齐方式
     
      flex-start:左对齐(默认值),项目以主轴的起点对齐
     
      flex-end:右对齐,项目以主轴的终点
     
      center:居中
     
      space-between:两端对齐,项目之间间隔相等
     
      space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
     
      align-items:定义项目在交叉轴的对齐方式(仅单行,多行对齐由align-content定义)
     
      stretch:如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)
     
      flex-start:从上到下,以交叉轴的起点为基线,向终点延伸
     
      flex-end:从下到上,以交叉轴的终点为基线,向起点延伸
     
      center:交叉轴的中点对齐,项目的中点放在交叉轴的中点上
     
      baseline:以一行中每个项目的第一行文字进行对齐.
     
      align-content:定义了容器内有多行项目时沿交叉轴的对齐方式,如果项目只有一根轴线,该属性不起作用
     
      stretch:轴线占满整个交叉轴(每行都有一条轴线),默认属性
     
      flex-start:以交叉轴的起点对齐
     
      flex-end:以交叉轴的终点对齐
     
      center:以交叉轴的中点对齐
     
      space-between:多行项目在交叉轴上间隔平均分布
     
      space-around:多行项目在交叉轴上两侧的间隔都相等。所以,项目在交叉轴上的间隔比项目与边框的间隔大一倍
     
      注:justify-content,align-items和align-content是容器的属性,而不是项目的属性,是设定一个容器内项目以轴线上的某一位置对齐
     
      3.2项目属性
     
      order:定义项目的排列顺序,数值越小,排列越靠前.默认值为0,写法如下
     
      .item{order:5}
     
      flex-grow:定义属性项目放大比例,默认为1
     
      如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍
     
      flex-shrink:定义项目缩小比例,默认为1
     
      如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小.负值对该属性无效
     
      flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(mainsize),浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
     
      它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
     
      flex:结合flex-grow,flex-shrink和flex-basis的属性,默认值为01auto,推荐优先使用
     
      该属性有两个快捷值:auto(11auto)和none(00auto
     
      align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
     
      该属性可能取6个值,除了auto,其他都与align-items属性完全一致



     

    如需转载,请注明文章出处和来源网址:http://www.cuhw.com.cn/jiqiao/j54115.shtml

  • 紫光阁中共中央国家机关工作委员会 2020-02-23
  • 看见什么有用?[猜想] 2020-02-23
  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14