文档章节

Flex布局

一诺_
 一诺_
发布于 2016/11/15 12:07
字数 783
阅读 18
收藏 2

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

Flex布局

容器属性

  1. 父元素首先设置 display:flex

  2. flex-direction: row(默认) | row-reverse | colum | colum-reverse

    该属性指定了Flex的项目怎样在flex容器中排列,设置flex容器的主轴方向,它们(项目)两个主要的方向排列,就像一行一样水平排列或者像一列一样垂直排列。

  3. flex-wrap: nowrap(默认值) | wrap | wrap-reverse

    初始情况下,Flexbox的理念是所有的项目都排列在一条线上(轴线),flex-wrap 属性控制容器是否将它的项目排列在一行或者多行,并且控制新行堆叠的方向。

  4. flex-flow: row nowrap

    该属性是上面两个属性的简写方式,前一个参数设置flex-direction,后一个参数设置flex-wrap

  5. justify-content: flex-start(默认值) | flex-end | center | space-between | space-around

    定义了项目在容器主轴上的对齐方式,当的容器中项目都是一行并且非弹性的时候或者项目是弹性的但是达到了它们的最小宽度的时候该属性可以定义容器中的剩余空间的分配。

  6. align-items: stretch(默认值) | flex-start | flex-end | center | baseline

    定义项目在交叉轴上的对齐方式,交叉轴与当前的轴线有关系,与justify-content很相似,只不过是垂直方向的;这属性为所有的项目设置默认的交叉轴上的对齐方式,包括匿名的。

  7. align-content: stretch(默认值) | flex-start | flex-end | center | space-between | space-around

    当交叉轴上还有多余的空间时它定了多行的对齐方式,类似justify-content在主轴上对齐所有项目的方式一样。

子元素属性

  1. order: number

    该属性可以很简单的控制项目的顺序,而不用在HTML代码里面做调整。这个整形值可以为负数,默认值是 0。

  2. flex-grow: number || 0

    该属性指定项目的生长因素,它确定了当容器有剩余空间分配的时候相对于其他的项目当前的项目能够增加多少宽度。

  3. flex-shrink: number || 1

    该属性指定了项目的收缩因素,它确定了当容器还有剩余空间收缩的时候该项目相对于其他项目的收缩多少。

  4. flex-basis: 100px || auto (不懂 )

    该属性的值和width和height的取值一样,在 flex factors分配剩余空间之前指定项目的初始的大小

  5. flex:

    该属性是flex-grow, flex-shrink 和flex-basis的缩写形式,同时属性值也有简写:auto表示(1,1,auto),none表示(0,0,auto) 注意: W3C鼓励使用flex的简写形式,因为flex在使用过程中会顺便初正确的重新设置没有确定的组件到常见用法。

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

    该属性和容器的align-items属性有同样的作用,它是用在单一的项目上的,可以完全压倒容器中align-items定义的对齐方式。

    注意:auto 表示项目会使用父元素(容器)的align-items的值,如果该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是:float、clear、vertical-align这些属性对于项目(flex item)会失效

© 著作权归作者所有

上一篇: OOP_1
下一篇: OOP_2
一诺_
粉丝 0
博文 3
码字总数 5963
作品 0
丰台
程序员
私信 提问
加载中

评论(0)

小程序入门到精通(三):学小程序必备技术基础-flex布局

学小程序我们需要有点html、css、js基础,而flex布局是我们小程序常用的css布局,学习小程序之前,我们需要了解一些css方面的布局知识-Flex布局,Flex 布局将成为未来布局的首选方案 1. fle...

前端岚枫
昨天
0
0
高级前端的进阶——css之flex

CSS flex 前言: 1. 初识 flex flex 是 flexible 的缩写,意思为弹性布局,用来为盒模型提供最大的灵活性。 任何一个容器都可以指定为 flex 布局( 包括行内元素 ): 元素设置 flex 属性后,其...

了不起的Rick
2019/03/12
0
0
「小程序JAVA实战」小程序的flex布局(22)

转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧。源码:https://github.com/limingios/wx...

osc_yuku1blu
2019/01/17
1
0
uni-app开发微信小程序系列之--样式与flex布局

上一节: uni-app开发微信小程序系列之--框架基础 flex布局 不论是支付宝, 还是微信等小程序都是推荐使用flex布局的. flex布局会有后面的章节以及示例项目中都有贯穿使用. flex布局的概念 fl...

James Zhang
05/08
0
0
从0到1,带你尝鲜flex布局

文章目录 1.flex布局体验 1.1传统布局与flex布局 传统布局 基于盒状模型,依赖display属性+position属性+float属性,它对于那些特殊的布局非常不方便,比如垂直居中就不容易实现。 2009年,W...

Fuyj
04/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

微服务项目搭建,到底要不要聚合工程?

这是一个入门问题,做微服务项目,首先就是要搭建 Project,代码采用什么样的形式来组织,这是我们面临的第一个问题。 要扯清楚这个问题,首先对 Maven 的使用不能含糊,小伙伴们可以在公众号...

osc_y12wmf09
16分钟前
15
0
C语言探索之旅 | 第一部分第六课:变量的世界(三),显示变量内容

作者 谢恩铭,慕课网精英讲师 Oscar老师。 转载请注明出处。 内容简介 用 printf 显示变量内容 用 scanf 提取程序中的输入 总结 第一部分第七课预告 1. 用 printf 显示变量内容 变量相关的内...

osc_zjs1puzi
17分钟前
14
0
php 操作RabbitMQ

基本流程图 如果exchange 没有绑定queue,则消息将会被丢弃 如果创建exchange,queue,并且已经绑定了,则可以直接使用 为了防止脚本出问题 可以配合supervisor 安装 从网站 https://packag...

php开源社区
19分钟前
18
0
Kotlin Coroutines Flow 系列(五) 其他的操作符

八. Flow 其他的操作符 8.1 Transform operators transform 在使用 transform 操作符时,可以任意多次调用 emit ,这是 transform 跟 map 最大的区别: fun main() = runBlocking { (1...

osc_0l1onu3j
19分钟前
13
0
挽救数据库性能的30条黄金法则

原文: 挽救数据库性能的30条黄金法则 1. 优化查询,应尽量避免全表扫描,应该在用于检索数据和排序数据的字段上建立索引,如where子句用于搜索,order by子句用于排序,所以在这两个子句涉及...

osc_gxvh47u5
20分钟前
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部