精选文章 flex布局笔记

flex布局笔记

作者:yfx000 时间: 2019-11-05 08:53:58
yfx000 2019-11-05 08:53:58

一、容器的属性

/* 主轴方向:    水平,水平反向,       列,         列反向 */
flex-direction: row | row-reverse | column | column-reverse;

/* 换行策略:不换行,换行,换行但第一行在第二行下面 */
flex-wrap: nowrap | wrap | wrap-reverse;

/* 简写形式:默认为row nowrap ,即水平排列-不换行*/
flex-flow: ;

/* 子元素在主轴上对齐方式,假设主轴是row */
/*                         左对齐          右对齐       居中    两端顶头_中间等距   两端留空_中间等距 */
justify-content: flex-start | flex-end | center | space-between     | space-around;

 

/* 子元素在交叉轴上对齐方式,假设主轴是row,交叉轴column */ 
/* 详见下图,默认值stretch代表占满容器的高度 */
align-items: flex-start | flex-end | center | baseline | stretch;

flex布局笔记1
align-items

 

/*  多根轴线的对齐方式,如果只有1根轴线,本属性不起作用:*/

/* 与交叉轴的起点对齐、交叉轴终点对齐.......*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch

flex布局笔记2
align-content

 

二、子元素的属性

/* 子元素之间排列顺序:数值越小,排列越靠前,默认为0 */
order: ;

flex布局笔记3

/* 子元素放大比例,默认为0,即如果存在剩余空间,也不放大 */
/* 所有项目的flex-grow属性都为1,则它们将等分剩余空间 */
flex-grow: ; /* default 0 */

flex布局笔记4

/* 子元素缩小比例,默认为1,即如果空间不足,该项目将缩小 */
/* 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小 */
/* 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,0不缩小。*/
flex-shrink: ; /* default 1 */

flex布局笔记5

/* 在分配多余空间之前,子元素占据的主轴空间(main size),默认值为auto,即项目的本来大小 */
/* 它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间*/
flex-basis: | auto; /* default auto */

/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选 */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

两个快捷值:auto (1 1 auto) 和 none (0 0 auto),建议这么写

 

/* 单个元素有与其他项目不一样的对齐方式 */
align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex布局笔记6

 

原文章 https://www.runoob.com/w3cnote/flex-grammar.html

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:#Paper Reading# Deep Learning Recommendation Model for Personalization and Recommendation Systems

下一篇:JAVA配置环境

您可能感兴趣

  • 对云桌面、桌面云、私有云的一些看法

    最近整理了一下自2017年以来自己对私有云服务平台构建的一些认识,并以刚刚为某后勤保障部队单位提供的小规模私有云服务平台为例阐述。 私有云平台、云计算服务与虚拟化: 我个人认为这三个名称分别指涉了三个不同的事物: 私有云平台:在实践中,私有云平台时包含了服务端软硬件集成和客户端软硬件集成的一整套特定业务需求场景的、已经处于落地实施阶段的解决方案项目。 比如某后勤保障部队为简化征兵流程、节省相...

  • 武田宣布2020财年第一季度业绩;确认管理层指引,并提高全年列报运营利润和列报净利润

    日本大阪--(美国商业资讯)--武田药品工业株式会社(Takeda Pharmaceutical Company Limited, TOKYO:4502/NYSE:TAK)(简称“武田”)今天宣布了2020财年第一季度(截至2020年6月30日)的财务业绩。基于第一季度的业绩,该公司确认了管理层指引,并提高了全年的列报运营利润和列报净利润。该公司还宣布了其研发产品线的最新消息,强调了其研发动...

  • 2020前端面试专题整理

    全是从网上整理的(狗头保命) vue3.0 与vue2.0的区别:https://juejin.im/post/6844904128628391944 目录结构发生变化: 移除了配置文件目录(config与build文件夹),但是多了env.production与env.development,除了文件位置,实际配置和2.0没有什么不同,没有config文件,跨域配置转移到vue.confi...

  • 【Python基础】如何编写简洁美观的Python代码

    作者 | ANIRUDDHA BHANDARI 编译 | VK 来源 | Analytics Vidhya 概述 Python风格教程将使你能够编写整洁漂亮的Python代码 在这个风格教程中学习不同的Python约定和Python编程的其他细微差别 介绍 你有没有遇到过一段写得很糟糕的Python代码?我知道你们很多人都会点头的。 编写代码是数据科学家或分析师角色的一部分。另一方面,编写漂...

  • 计算机必备专用英语词汇

    非常好的单词整理,转载一下当作笔记 1.单词说明:   command n. 命令,指令 [kə'mɑ:nd]   单词拼写 名词 单词含义 音标(发音)   提示:着重记忆单词对应的意思,有能力最好词性也记忆。 2.词性说明: n v vi vt conj prep pron adj adv 名词 动词 非及物动词 及物动词 连词 介词 代词 形容词 副词 3.单词列表: 1.file,n...

  • 2. XAML

    用ASP.NET Core编写Web应用程序时,除了需要知道C#之外,还需要了解HTML、CSS和JavaScript。创建Windows应用程序时,除了C#之外,还需要了解XAML。XAML不仅用于创建Windows应用程序,还用于Windows Presentation Foundation(WPF)、Windows WorkFlow Foundation(WCF)和Xamarin的跨平...

  • 中国耳机能否把AirPods拉下铁王座,全看一颗“芯”

    作者|茜茜 编辑|猛哥 1853年,犹太青年李维斯和当时的许多美国人一样,满怀梦想地踏上了西部淘金之旅。 很遗憾,他去晚了,到处都是人,还被抢地盘的恶棍们给揍了一顿。 李维斯很快从欺辱中恢复过来,他发现淘金人的衣服很容易磨破,而西部到处都是废弃的帐篷,如果把这些帐篷缝制成裤子,肯定抗穿耐磨。就这样,他缝制了世界上第一条牛仔裤。从此开创了他的牛仔裤王国。 世上的事情就是这么不可思议。 150年...

  • 如何基于 Electron 开发跨终端的应用

    自我介绍 欢迎大家来到今天的早早聊跨端跨栈专场,今天我分享的主题是《如何基于 Electron 开发跨终端的应用》。先做一下自我介绍,我叫逯子洋,17 年加入政采云,目前主要负责政采云前端工程化平台敦煌以及政采云电子招投标客户端的建设。这边是我们团队的微信公众号,大家如果想对我们团队有更多的了解,可以关注一下我们的公众号。 首先我们分享的第一块叫端的延展。不知道大家对这张图熟不熟悉,前段时间...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。