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. es上的的Watcher示例

    Watcher插件配置(创建预警任务) watcher目前是沒有界面配置的,需要通过Resfulapi调用创建.管理.更新预警任务 创建一个Watcher任务的流程是怎样的? 我们先来看下创建一个预警 ...

  2. Mock6 moco框架中如何加入header

    新建一个 startupWithHeader.json,这次在request里面添加了headers属性 [ { "description": "这是一个带header的 ...

  3. docker基本概念

    详细参考https://www.jianshu.com/p/9deb6f41d5bd

  4. 关于ehcache缓存中eternal及timeToLiveSeconds和timeToIdleSeconds的说明

    今天发现开发项目启动时有警告提示:cache 'xx' is set to eternal but also has TTL/TTI set,发现是ehcache缓存设置冲突 所以决定在此mark一下 ...

  5. Mycat的读写分离

    1. Mycat实现读写分离的部署: https://www.cnblogs.com/softidea/p/5447566.html springboot动态数据源的原理以及配置: Spring内置了 ...

  6. Java多线程_复习(更新中！！)

    java多线程的常见例子 一.相关知识: Java多线程程序设计到的知识: (一)对同一个数量进行操作 (二)对同一个对象进行操作 (三)回调方法使用 (四)线程同步,死锁问题 (五)线程通信 等等 ...

  7. .net core 多租户框架整理

    一 saaskitAsp.Net Core multi-tenant application Sample using #SaaSKithttps://github.com/saaskit/saask ...

  8. <锋利的jQuery>读书笔记

  9. 6.linux安装tomcat

    1.下载安装包 https://tomcat.apache.org/download-80.cgi       2.用 WinSCP 将本地的安装包 上传到 linux 服务器中   3.解压安装包( ...

  10. kettle 数据迁移

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