为了账号安全,请及时绑定邮箱和手机立即绑定

Flex布局入门

标签:
Html/CSS

父元素

display: flex

.container {  display: flex;
}

flex-direciton

.container {  flex-direction: row | row-reverse | column | column-reverse;
}
  1. row,默认值,水平从左到右

  2. row-reverse,1相反

  3. column 垂直从上到下

  4. column-reverse 3相反

flex-wrap

设置当子元素超过父元素时是否换行,上面方法设置换行的方向

.container {  flex-wrap: nowrap | wrap | wrap-reverse;
}
  1. 不换行,默认值。
    其他字面意思

flex-flow

flex-directionflex-wrap的缩写,默认值row nowrap

flex-flow: <'flex-direction'> || <'flex-wrap'>;

justify-content

设置横轴方向上的对齐方式

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

align-items

设置垂直方向上的对齐方式

.container {  align-items: flex-start | flex-end | center | baseline | stretch(拉伸);
}

align-content

设置整体的对齐方式(用的比较少,适用于多行)

.container {  align-content: flex-start | flex-end | center | baseline | stretch(拉伸) | space-between | space-around ;
}

子元素

order

.item {  order: <integer>;
}

使得子元素按照order顺序呈现,数值小的在前面

align-self

可以设置子元素针对自己纵轴方向上的对齐方式,可以覆盖父容器align-items的设置

.item {  align-self: flex-start | flex-end | center | baseline | stretch | auto;



作者:徐金俊
链接:https://www.jianshu.com/p/a004f1f96ea8


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消