码迷,mamicode.com
首页 > Web开发 > 详细

【CSS3基础-Flex布局】

时间:2018-10-13 14:45:15      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:css   css3   继承   应用   基本   justify   属性   过程   不用   

关于Flex

背景

在flex布局出现以前,常用的水平和垂直居中对齐方式有很多。flex布局的出现基本规范了这一过程。
通过justify-content和align-items两个属性即解决了水平居中、垂直居中、水平垂直混合居中的问题。

display:flex

应用在父元素的属性

  • flex-flow:flex-direction flex-wrap;
  • align-items;
  • justify-content;
  • align-content(多行模式)

flex-flow

align-items

  • stretch
    align-items默认值为stretch。其含义即如果指定侧轴宽度未定义或auto时,所有子项目边距盒的宽度伸缩尽可能接近行宽度。这里的行宽度不一定由子项本身,而是由同级某个最大宽度子项宽度所决定。
// 可以实现不同大小的图片显示固定高度
<div class="imgs">
<div class="wrapper">
<img>
</div>
<div class="wrapper">
<img>
</div>
</div>
.imgs{
    display: flex;
    align-items: stretch;
}
.imgs .wrapper img{
    height: 100%; // 使用flex后 直接设置高度100%可生效,不用一层一层向下传递
}

应用在子元素的属性

  • flex: flex-grow flex-shrink flex-basis;
  • align-self 默认继承自父元素align-item,父元素无时默认为stretch;
  • order 对子项进行排序 正序排列;

定位后的flex子项

定位后的flex子项不再继承flex属性,但是其内部依旧可以使用flex布局。

【CSS3基础-Flex布局】

标签:css   css3   继承   应用   基本   justify   属性   过程   不用   

原文地址:https://www.cnblogs.com/wanxiong/p/css3-basic-flex.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!