CSS - Flexbox总结
Flexbox
Flexbox是layout的一种方式, 对于控制single dimensional的layout来说, flexbox是很好的选择.
display: flex
放在parent上, flex的元素是children
Directions and Alignment
justify-content
: 控制的是primary的axis元素的排列
align-items
: 控制的是secondary的axis元素的排列
Alignment Tricks
Baseline alignment
nested flexbox
nav 使用了flexbox, nav的children ul 也使用了flexbox
Align self
在子元素中使用, 使其按照自定义的样式展示
Note: align-self
是作用在secondary axis上的, 没有justify-self
因为在primary axis上有flex-grow
, flex-shrink
, flex-basis
and order
使用
Growing and Shrinking
知识点
- flexbox有一个hypothetical size
- 设置
width
就是这是了hypothetical size flex-basis
跟设置width一样, 但是如果conflict, flex-basis winflex-grow
设置子元素占满多余的空间flex-shrink
, 在minimum space前会缩小调.flex-shrin: 0
, 就是不让元素缩小
The flex Shorthand
flex takes 3 individual values:
- flex-grow, as a unitless value (eg. 1)
- flex-shrink, as a unitless value (eg. 5)
- flex-basis, as a length unit (eg. 200px)
- By default, flex-grow 会占满整个元素空间
flex:1
就是flex-grow: 1
,flex-shrink: 1
andflex-basis: 0%
2012 dodge charger sxt 0 60
flex-basis: 0
: 计算的是元素所有的空间
flex-basis: auto
: 计算的是元素内的padding
Constraints
如果有需要限制最大尺寸的话可以用max-width
or max-height
Shorthand Gotchas
要注意如果使用flex: 1
, 这是设置width为0%, 如果需要设置min-width, 需要声明flex: 1 1 200px
Wrapping
如果需要有inline元素的line-wrap
属性的话, 在flexbox中可以使用flex-wrap
Groups and Gaps
有点像margin, 这个是在flexbox中设置元素之间的距离
怎么解决三个元素其中一个left, 两个right
2012 dodge charger sxt 0 60
const Wrapper = styled.header`display: flex;
`;const Logo = styled.a`margin-right: auto;
`;
Ordering
Flexbox提供调转order的方法, 但是这个只是visual order
row-reverse
and column-reverse
还有
order
以及flex-wrap: wrap-reverse
CSS - Flexbox总结相关推荐
- css flexbox模型_5分钟内学习CSS Flexbox-初学者教程
css flexbox模型 快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...
- 设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局(上)...
在" Flexbox布局"模块之前,有四种布局模式: 四种布局模式: 块布局block,常见的就是div 内联inline,用于文本 表table,用于二维表数据 定位positi ...
- cordova 不安全 css,[译] CSS Flexbox 中安全/不安全的对齐方式
CSS Flexbox 中安全/不安全的对齐方式 我最近看了 Rachel Andrews 的演讲锦上添花:重新定义 CSS 的技术潜力.Rachel 的演讲总是能清晰而简洁地传达出满满的干货.这次演 ...
- figma下载_我如何使用Figma,CSS Grid和CSS Flexbox构建登录页面
figma下载 I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they ...
- css flexbox模型_如何将Flexbox后备添加到CSS网格
css flexbox模型 I shared how to build a calendar with CSS Grid in the previous article. Today, I want ...
- css flexbox模型_Flexbox和CSS Grid之间的主要区别
css flexbox模型 by Shaira Williams 由莎拉·威廉姆斯(Shaira Williams) Flexbox和CSS Grid之间的主要区别 (The main differe ...
- css flexbox模型_完整CSS课程-包括flexbox和CSS网格
css flexbox模型 Learn CSS in this complete 83-part course for beginners. Cascading Style Sheets (CSS) ...
- css flexbox模型_Flexbox教程:了解如何使用CSS Flexbox编写响应式导航栏
css flexbox模型 In this article, I'll explain how to create a navbar which adapts to various screen si ...
- css flexbox模型_代码简介:CSS Flexbox有点像旅行
css flexbox模型 Here are three stories we published this week that are worth your time: 这是我们本周发布的三个值得您 ...
- css flexbox模型_CSS Flexbox在全国范围内的公路旅行中得到了解释
css flexbox模型 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) CSS Flexbox在全国范围内的公路旅行中得到了解释 (CSS Flexbox ...
最新文章
- 构造函数中的虚拟成员调用
- BizTalk开发系列(三十一)配置和使用HTTP适配器
- 7-27 兔子繁衍问题(15 分)
- AI打AI,人脸对抗攻击公开课第四讲预告:对抗防御介绍
- linux下php启动实例,linux下实现定时执行php脚本_php实例
- python会取代前端吗_大家说,python在不远的将来,会不会把java替代,为什么?
- 定量库存控制模型_供应链分析:关于库存管理的预测功能(1)
- php上传文件类插件,JQueryfileupload插件实现文件上传功能_jquery
- Doris之数据划分(全面)
- 在SharePoint 2010中使用jQuery
- Hyperledger Fabric教程(7)--启动fabric区块链网络 如何查看节点日志
- 基于Proteus仿真8253音乐发生器
- 雷锋读图:如何通过社交媒体提高投资回报率
- JS将sql的dateTime格式数据例如:Wed Sep 30 00:00:00 CST 2020 字符串转换成2020-09-30 00:00:00时间格式
- 不同系统下的shell的不同_不同地区不同气候条件下杉木成材时间的区别
- Android 头像上传
- CoppeliaSim添加ROS自定义消息类型
- 保温夹层滤芯式过滤器
- 【软件定义汽车】【服务篇】SOA服务及接口设计、服务部署、序列化
- 现代控制工程-状态空间(正在更新)
热门文章
- 深入分析ClassLoader
- 苹果手机各种型号图片_苹果平板电脑图片欣赏及各型号介绍【图文】
- 多维tensor/numpy array的拼接(np.stack, torch.cat)
- python爬虫爬取新闻标题及链接_网络爬虫百度新闻标题及链接爬取
- 计算机机房必须用七氟丙烷灭火器吗,释放七氟丙烷气体会不会使人窒息?
- 【转载】又1个教程--简明批处理教程
- Centos7 内存插槽信息
- 杭电信工微巴士功能技术设计
- 苹果敢对“赞赏”分成30%真的是靠垄断吗?
- LHS 查询和 RHS 查询