前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS之——Flex(一)

CSS之——Flex(一)

作者头像
萌兔IT
发布2019-07-26 14:06:29
6610
发布2019-07-26 14:06:29
举报
文章被收录于专栏:萌兔it

Hello小伙伴们,好久不见,想必这段时间连翻的ES6让大家感觉有些烦躁,我们今天再来讲一讲CSS吧!大家听过Flex布局吗?这个可是响应式布局的利器呢~

现在我们就来讲讲Flex吧~今天主要谈谈容器:

Flex基础知识

Flex布局到底是个啥,Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何盒子都可以成为容器,但是一旦成为容器,其子元素的一些布局就丧失了作用,比如float、clear、vertical-align等属性。

我们说到了容器,容器就是装东西的,这里装的就是item,元素成为容器了,其子元素就成为item了~

定义flex布局:

容器

容器总共有6个属性:就是在我们摆放东西的时候我们会想,怎么个排放顺序,怎么个排放方向等,这里也是一样。

1)flex-direction:决定主轴的方向(即项目的排列方向)

flex-direction: row | row-reverse | column | column-reverse;

分别表示:主轴为水平方向,起点在左 | 起点在右 | 主轴为垂直方向,起点在上 | 起点在下

2)flex-wrap:定义如果一条轴线排不下,如何换行

flex-wrap: nowrap | wrap | wrap-reverse;

分别表示:不换行 | 换行,第一行在上 | 换行,第一行在下

3)flex-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

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

4)justify-content:定义了项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

分别表示:左对齐 | 右对齐 | 居中 | 两端对齐,item之间间隔相等 | 每个项目两侧间隔相等

5)align-items:定义项目在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;

分别表示:交叉轴起点对齐 | 终点对齐 | 中点对齐 | item第一行文字基线对齐 | 项目未设置高度,则占满整个容器高度

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

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

}

与上个有些相似~~不过有些不同的属性:

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-03-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档