Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。使用flex 布局，给父容器设置display: flex，然后再设置justify-content: center可以实现水平居中，设置 align-items: center可以实现垂直居中。

flex的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴。

一、容器和轴

二、父容器的属性

三、子容器的属性

四、我的demo

https://codepen.io/camille666/pen/VMrPaX

https://codepen.io/camille666/pen/pWdeNr

https://codepen.io/camille666/pen/jGaBoz

https://codepen.io/camille666/pen/aLVWjN

https://codepen.io/camille666/pen/yzPbdB

网页布局之flex的更多相关文章

  1. 【css3网页布局】flex盒子模型

    1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...

  2. 浅谈新的布局方式-flex

    引言: 网页布局在flex出来之前,是由盒模型为底子,float,position,table,百分比来进行布局的,重绘的比较多,影响性能,复杂又不好维护.flex布局,可以简便.完整.响应式地实现各 ...

  3. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  4. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  5. 网页布局之grid

    学习网格布局时,你可能会在网络上看到很多文章,内容不同,属性不同,真是让人摸不着头脑,到底哪个才是正确的?看了本篇文章,我想你会豁然开朗.比如,一会儿用grid-rows,一会儿用grid-defin ...

  6. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

  7. Web开发系列【1】实用的网页布局（PC端）

    在熟悉那些常用的软件.工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局.在w3c.菜鸟.慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教 ...

  8. cdispaly的Grid布局与Flex布局

    cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...

  9. vivo前端智能化实践：机器学习在自动网页布局中的应用

    作者:vivo 互联网前端团队- Su Ning 在设计稿转网页中运用基于self-attention机制设计的机器学习模型进行设计稿的布局,能够结合dom节点的上下文得出合理的方案. 一.背景 切图 ...

随机推荐

  1. java 11 移除的一些其他内容，更简化的编译运行程序，Unicode 10，移除了不太使用的JavaEE模块和CORBA技术，废除Nashorn javascript引擎，不建议使用Pack200 相关api

    移除的一些其他内容 移除项 移除了com.sun.awt.AWTUtilities 移除了sun.misc.Unsafe.defineClass, 使用java.lang.invoke.MethodH ...

  2. 驱动调试(一)-printk

    目录 驱动调试(一)-printk 引入 框架 入口console_setup add_preferred_console register_console s3c24xx_serial_initco ...

  3. python之路（1）数据类型

    目录 整型 布尔值 字符串 列表 元组 字典 整型(int) 将字符串转换成整型 num = "123" v = int(num) 2. 将字符串按进制位转换成整型 num = & ...

  4. 6核 CPU导致SQL2005安装时出“无法启动服务”错

    周一新买的IBM3650M3的服务器上安装SQL server2005 安装到一半时,报"提示:SQL Server 服务无法启动."错. 换了几个操作系统版本和换了几个版本的sq ...

  5. Java编码中出现的乱码问题

    1 让eclipse新建的jsp页面直接默认的就是gb2312 打开Window->Preferences,打开General中的 Content Types,选中Text 这是改全部的TXT的 ...

  6. UIWebView代码注入时机与姿势

    一个奇怪的业务场景,引发的胡乱思考 问题其实不难解决,只是顺着这个问题,发散出了一些有意思的东西 本文旨在讨论UIWebView,WKWebView有自己的机制,不用这么费劲 我们的业务最大的最重要的 ...

  7. luogu 4345 Lucas的变形应用

    求 sigma i由0-k C(n,i) 利用Lucas定理+整除分块将C(n/p,i/p)利用i/p分块,得到k/p-1个整块(p-1)和一个小块(k%p) 最后得到式子 F(n,k)=F(n/p, ...

  8. json字符串CSS格式化

    其实JSON.stringify本身就可以将JSON格式化,具体的用法是: JSON.stringify(res, null, 2); //res是要JSON化的对象,2是spacing 如果想要效果 ...

  9. 第四章Android移植环境搭建

    第四章Android移植环境搭建 这一章主要学习如何搭建 Android 移植的环境.因为 Android 底层是基于 Linux 内核的,所以本章从交叉编译环境等嵌入式开发环境的搭建开始,介绍了 B ...

  10. kettle 数据迁移

    最近在公司搞一个项目重构迁移问题,旧项目一直在线上跑,重构的项目则还没上线.重构之后数据库表结构,字段,类型等都有变化,而且重构的数据库由oracl改为mysql.这样就设计到数据迁移问题,别人推荐下 ...