专栏首页达达前端Day11:Flex布局

Day11:Flex布局

参考: 来源:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

网页布局是css的一个重点。

盒子模型

display属性
position属性
float属性

W3C提出了一种新的方案—-Flex布局

弹性布局 任何一个容器都可以指定为Flex布局

.box{
  display: flex;
}

行内元素也可以使用Flex布局

.box{
  display: inline-flex;
}
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

设为Flex布局 子元素的float、clear和vertical-align属性

image

image.png

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性决定主轴的方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

image

image.png

flex-wrap属性 默认情况下,项目都排在一条线 如果一条轴线排不下,就换行

image

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认):不换行

image

wrap:换行,第一行在上方

image

wrap-reverse:换行,第一行在下方

image

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

默认值为row nowrap

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content属性定义了项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

image

image.png

align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

image

image.png

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

image

image.png

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

.item {
  order: <integer>;
}

image

flex-grow属性定义项目的放大比例 默认为0,即如果存在剩余空间,也不放大

.item {
  flex-grow: <number>; /* default 0 */
}

image

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

.item {
  flex-shrink: <number>; /* default 1 */
}

image

image.png

image.png


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 图文学习前端Flex布局

    本篇文章进行学习css中的一个重点应用,布局样式为flex布局,相信你学习了解过display属性,position属性,float属性,但今天只学习新东西就是...

    达达前端
  • 全栈开发工程师微信小程序-上

    wx:for是列表渲染标签,默认当前循环项的变量名为item.wx:key用于在动态列表渲染中保存子项的特征和状态.

    达达前端
  • 小程序flex布局

    目录的规范,所有组件要放在components目录下,所有图片要放在images目录下,模型文件时用于编写各类业务的模型,需要放在models文件下。

    达达前端
  • 弹性(Flex)布局的使用

    最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。

    嘉为科技
  • 深入了解 Flex 属性

    你有没有想过 CSS 中的 flex属性如何工作? 它是 flex-grow,flex-shrink和flex-basis的简写。 开发中最常见的写法是flex...

    前端小智@大迁世界
  • 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有...

    pingan8787
  • css3 flex弹性布局总结

    本文涉及内容如下: flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器,但属性实在太多让人无从下手,因此将自己所学的...

    十月梦想
  • CSS:10分钟搞定Flex布局

    Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

    WEBJ2EE
  • 图文学习前端Flex布局

    本篇文章进行学习css中的一个重点应用,布局样式为flex布局,相信你学习了解过display属性,position属性,float属性,但今天只学习新东西就是...

    达达前端
  • css3 Flex布局 学习

    在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴...

    heidsoft

扫码关注云+社区

领取腾讯云代金券