Vue.js学习笔记(5)

关于Flex-box布局学习:

1、容器(flex container),所有的子元素自动成为容器成员

容器默认两个轴 main axis:水平主轴 cross axis:垂直交叉轴

2、容器属性

2.1 flex-direction
// 主轴的方向(成员的排列方向)
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row:水平方向,起点为左端
row-reverse:水平方向,起点为又端
column:垂直方向,起点在上方
column-reverse:垂直方向,起点在下方
2.2 flex-wrap
成员排列在一条轴线上,flex-wrap解决排列不下问题
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap: 不换行
wrap:换行
wrap-reverse:换行,第一行在下方
2.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
2.4 justify-content在主轴上的对齐方式
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
2.5 align-items交叉轴上的对齐方式
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

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

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

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

3 项目(成员)的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关闭Eslint语法校验

    程序员不务正业
  • WebDriverAgent学习使用

    程序员不务正业
  • icome中web与native开发接口调用

    https://note.youdao.com/ynoteshare1/index.html?id=039f8d587c9287898bb409d21de7b7...

    程序员不务正业
  • 30分钟彻底弄懂flex布局

    在这篇文章里,想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程,为什么又要再写一篇?

    elson
  • flexbox 布局

    即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

    双面人
  • 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

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

    pingan8787
  • CSS:10分钟搞定Flex布局

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

    WEBJ2EE
  • 深入 CSS 中的弹性盒子 Flexible Box

    弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。

    IT技术小咖
  • 弹性(Flex)布局的使用

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

    嘉为科技
  • 10分钟理解CSS3 FlexBox

    设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;

    MudOnTire

扫码关注云+社区

领取腾讯云代金券