吉林11:17.(初级)CSS弹性盒flex

吉林省十一选五走势图 www.el2sw.cn 2/10/2017来源:心得技巧人气:6184

一、弹性盒子基础结构

<div id=”flex_box”>         ------->弹性容器

    <div id=”flex1”>1</div>  ------->弹性项1

    <div id=”flex2”>2</div>  ------->弹性项2

    <div id=”flex3”>3</div>  ------->弹性项3

</div>

二、弹性容器属性

1、设置元素变成弹性盒

display:flex;

2、flex-flow

值一:设置弹性项控制弹性项目的排列方向(行或列),值二:控制弹性项能否换行

flex-flow:row(默认)/row-reverse/column/column-reverse  nowarp/warp/warp-reverse;

说明:

属性值1:

row(默认):弹性容器宽度足够时,弹性项并排显示。

column:弹性容器高度足够时,弹性项并列显示。

属性值2:

nowarp:无论浏览器多窄,都不换行。

warp:自动换行。

例如:

1、不允许换行

#flexs_box{     display: flex;     display: -webkit-flex;     width: 50%;     height: 50%;     flex-flow: row nowrap; } #flexs_box div{     width: 30%;     height: 20%; }

 

2、 允许换行

#flexs_box{     display: flex;     display: -webkit-flex;     width: 50%;     height: 50%;     flex-flow: row wrap; } #flexs_box div{     width: 30%;     height: 20%; }

3、justify-content

设置弹性项目水平对齐方式。

!弹性容器宽度/高度必须足够。

justify-content:flex-start/flex-end/center/space-between/space-around

说明:

flex-start:靠左对齐

flex-end:靠右对齐

center:居中对齐

space-between:根据宽度/高度均布均布弹性项,最左及最右不均布。

space-around:完全根据宽度/高度均布均布弹性项,包括最左及最右。

 

 4、align-items

设置所有弹性项目纵向对齐方式。

align-items:flex-start/flex-end/center/baseline/stretch(默认)

说明:

flex-start:顶对齐

flex-end:底对齐

center:纵向居中对齐

baseline:弹性项第一行对齐

stretch:顶和底对齐

 

5、align-content

align-content属性有效条件:

1、必须允许换行

2、弹性容器高度满足

多弹性项换行情况纵向对齐方式。

align-content:flex-start/flex-end/center/space-between/space-around/stretch

说明:

flex-start:顶对齐

flex-end:底对齐

center:纵向居中对齐

space-between:第一行弹性项顶对齐,最后一行弹性项底对齐

space-around:纵向平均分布,包括最上最下

stretch:拉伸各项弹性项,设置成相同高度

 

6、order

设置弹性项显示的先后顺序:order:-1/1/2....

例如:

<div id="banner">     <p class="logo">Our Company</p>     <a href="#">Home</a>     <a href="#" class="heightlight">About Us</a>     <a href="#">Content</a> </div>

    #banner{         display: flex;         display: -webkit-flex;         align-items:flex-end;         background: #000;         color: #ffffff;         padding: 20px;         padding-bottom: 0px;     }     p{         font-size: 20px;         margin: 0;     }     a{         color:#fff;         display:inline-block;         padding: 5px 10px;         padding-bottom: 2px;         text-decoration: none;         background: #666;         margin-left: 5px;         border-radius: 3px 3px 0 0;     }     .heightlight{         background:#ccc;     }

未设置margin-right: auto;

 

!设置margin-right: auto;意思是让浏览器把右边可用的部分利用起来。     .logo{         margin-right: auto;     }

 

三、弹性项属性

1、align-self:

设置单个弹性项目纵向对齐方式。

flex1{

    align-self:xxxx;

}

2、flex

flex:flex-grow flex-shrink flex-basic;

说明:

flex-grow:所占宽/高比例:

    0:宽度为flex-basic

    ≥1:弹性容器减去flex-basic,剩余值按比例划宽/高

flex-shrink:弹性项宽/高变化率,值越大变化量越大

flex-basic:弹性项最小宽/高,作用控制何时换行,响应式设计中的断点。

例如:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



  • “游、购、娱”持续升温 中国经济内生动力表现强劲 2019-04-19
  • 我老张工经历过中国计划经济时代,实践过计划经济,岂能不知计划经济?!现在的市场经济,我也有了实践感受。比较之,深感计划经济是适合社会主义的,而市场经济是不适合社 2019-04-19
  • [酷]此文已经把马克思理论、边际理论、人类需求层次理论、生物学理论、心理学理论、社会管理学理论等理论在哲学层面完美融合了! 2019-04-18
  • 特朗谱跟你一样,也经常懵逼:“这么简单的道理也想不通?”;"西方民主这么好,你咋不学捏?? 2019-04-18
  • 大学毕业生是不是越来越过剩?当然大学毕业生可以在多种行业就业,比如农村、服务业等等。不过,过剩还是一种极大的浪费。 2019-04-17
  • 要战胜对手需要学习对手的长处,弥补自己的短处,但这不是关键,关键是发扬自己的长处。这叫你打你的,我打我的。 2019-04-16
  • [大笑]精神心理科医生在等你…… 2019-04-16
  • 燃!来南京,看中国电科如何燃爆第八届世界雷达展 2019-04-15
  • VAR技术再抢镜 瑞典队1-0点杀韩国 2019-04-15
  • 中国共产党各时期的入党誓词 2019-04-14
  • 浙江:三批次壁纸抽检不合格 选购注意“看摸擦闻” 2019-04-13
  • 世界杯—凯恩补时绝杀独中两元 英格兰2 2019-04-12
  • 全国首例!团队联合成功攻关,这项新技术让食管癌手术更精准 2019-04-12
  • 线下提前一刻钟!电影节加映场开票出福利 2019-04-11
  • 蔬菜大县敲开“阿里巴巴” 2019-04-10
  • 133| 185| 990| 90| 775| 577| 537| 265| 553| 982|