文档章节

Flex布局

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

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)会失效

© 著作权归作者所有

共有 人打赏支持
一诺_
粉丝 0
博文 3
码字总数 5963
作品 0
丰台
程序员
进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear ⋅ 05/29 ⋅ 0

写给 Android 开发的小程序布局指南,Flex 布局!

一、序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的。 想要开发一款小程序,其实和我们正常写一款 ...

承香墨影 ⋅ 06/12 ⋅ 0

css3最全flex布局结构整理

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左...

韦姣敏 ⋅ 05/03 ⋅ 0

Flexible Box 布局与小程序开发

Flexible Box 布局与小程序开发 参考资料: 1.A Complete Guide to Flexbox BY CHRIS COYIER 2.Flex 布局教程:语法篇 3.Flex 布局教程:实例篇 4.A Visual Guide to CSS3 Flexbox Propertie......

坚果jimbowhy ⋅ 05/27 ⋅ 0

flex和box如何使用,flexbox又是什么

display:box; 是老语法,display:flex;是新语法。flexbox是只有ie10才有的特殊语法,ie11可以用flex。 box支持的浏览器更多,flex旧版本浏览器不支持。 flex能让我们轻易的实现 宽度均分、垂...

linsk1998 ⋅ 05/16 ⋅ 0

React Native -- Flexbox

1、alignItems enum('flex-start', 'flex-end', 'center', 'stretch') 源码描述 // How to align children in the cross direction// https://developer.mozilla.org/en-US/docs/Web/CSS/ali......

jwzhangjie ⋅ 2015/09/28 ⋅ 0

整合Springboot+Blazdes+Spring+Flex

写在前面: Flex是10年前的产物,基本也要退出历史舞台了,手里有个Flex 项目,最近又在看SpringBoot方面的书,突发奇想,能不能整合一下。由于Flex年代久远,国内相关文献实在是少的可怜。努力...

章大大 ⋅ 06/15 ⋅ 0

CSS3 display:flex和display:box的区别

display:box; 是老语法,display:flex;是新语法,二者还有以下不同:与子元素 display 方式的相关性不同display:box; 作用下,如果子元素是 block 的,竖着排,如果子元素是 inline、inline-...

莫西摩西 ⋅ 04/26 ⋅ 0

vertical-align,dispaly:table-cell | table | flex

一、vertical-align 定义:设置元素(img,input这种类型的元素) 或者元素下面的文本元素(div,span。。。)的垂直对齐方式。 但是 其 只对 一些特定显示样式(例如 单元格显示方式:table-cel...

zwjjap ⋅ 05/17 ⋅ 0

2018-05-23 清除浮动、左边固定右边自适应、水平垂直居中

清除浮动、左边宽度固定右边自适应、水平垂直居中这三个知识点是我们经常在开发过程中需要用到的。不但经常用到,而且经常出现在面试题当中,所以对这三者进行知识总结很有必要。 1.清除浮动...

瑾瑜爱上猫 ⋅ 05/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 54分钟前 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 7

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部