flex布局

css水平垂直居中

由 梦想与她 提交于 2019-12-20 12:30:23
css水平垂直居中方法总结，简单明了 水平居中 对于行内元素(inline)：text-align: center; 对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto 对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局 垂直居中 对于行内元素(inline) 单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等 多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素 来源： https://www.cnblogs.com/renzm0318/p/8932827.html

Flex弹性布局以及box-sizing

由 我怕爱的太早我们不能终老 提交于 2019-12-19 00:01:18
(本篇内容代表本人理解，如有错误请指出！) box-sizing box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。 /* 关键字 值 */ box-sizing: content-box; box-sizing: border-box; /* 全局 值 */ box-sizing: inherit; box-sizing: initial; box-sizing: unset; content-box <style> .cen{ width:500px; height:250px; border: 5px solid red; box-sizing:content-box; background-color: darkcyan; padding: 0 50px } </style> </head> <body> <div class="cen"> width 和 height 属性包括内容，内边距和边框，但不包括外边距。</div> </body> 上图以及代码可以看出box-sizing值为content-box的时候，你所设的宽度而不是实际宽度了，而实际宽度是：width(所设置的宽度)+border+padding border-box <style> .cen{ width

bootstrap4常用样式类名

由 ぃ、小莉子 提交于 2019-12-17 04:44:10
bootstrap4 常用样式类名 （供自己参考） 1、容器和网格系统 容器 container 固定宽度，不同尺寸固定了不同的宽度 container-fluid 100%宽度 栅格系统 cal-xs//<768px cal-sm //>=768px cal-md //>=992px cal-lg //>=1200px 2、字体颜色及背景颜色 字体 text-muted 柔和 text-primary 重要 text-success 成功 text-info 提示 text-warning 警告 text-danger 危险 text-secondary 副标题 text-dark 深灰色文字 text-light 浅灰色 text-white 白色 背景 bg-primary bg-secondary bg-success bg-danger bg-warning bg-info bg-light bg-dark bg-white 3、边框 增加边框 border //默认：1px solid #dee2e6!important border-top border-left border-right border-bottom 删除边框 border-0 //去除边框或者除去某一边的边框 border-top-0 border-left-0 border-right-0

CSS3 Flex布局（伸缩布局盒模型）学习

由 大憨熊 提交于 2019-12-17 01:45:26
CSS3 Flex布局（伸缩布局盒模型）学习 转自：http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局：块布局、行内布局、表格布局盒定位布局。 CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒（Flexible Box）模型，此布局对于设计比较复杂的页面非常有用，特别是“垂直居中”布局，非常容易实现。 Flexbox布局语法有三种： 旧版本：2009年版本，使用display:box或者display:inline-box; [目前仅Safari浏览器支持] 混合版本：2011年版本，使用display:flexbox或者display:inline-flexbox; [仅IE10支持] 最新版本：使用display:flex或者display:inline-flex. [目前的主流浏览器均支持，不过在Webkit内核浏览器需要使用前缀“-webkit-”] 对于Flex布局，最初是通过看绿叶学习网，学的是flexbox旧版本，感觉很简单；然后又看了大漠老师的《图解CSS3-核心技术与案例实战》，其中详细介绍了三种布局，但我理解的不深，有些迷糊。最后通过网上找到了阮一峰翻译的一篇文章，直观易懂，终于明晰了Flex布局。 关于Flexbox布局旧版本（display:box/inline-box

Day11:Flex布局

由 末鹿安然 提交于 2019-12-16 17:49:34
参考： 来源： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局是css的一个重点。 盒子模型 display属性 position属性 float属性 W3C提出了一种新的方案—-Flex布局 弹性布局 任何一个容器都可以指定为Flex布局 .box{ display: flex; } 行内元素也可以使用Flex布局 .box{ display: inline-flex; } .box{ display: -webkit-flex; /* Safari */ display: flex; } 设为Flex布局 子元素的float、clear和vertical-align属性 flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction属性决定主轴的方向 .box { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap属性 默认情况下，项目都排在一条线 如果一条轴线排不下，就换行 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } nowrap（默认）

移动端布局（3）

由 时光毁灭记忆、已成空白 提交于 2019-12-16 11:50:20
4.弹性盒模型 4.1.什么是弹性盒模型 css3引入了一种新的布局模式，叫做Flexbox布局，即伸缩布局和（Flexible Box）模型，很多地方又称为弹性盒模型，我们下面都叫弹性盒模型，它可以用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局 css中的布局方式总结： 块布局 行内布局 表格布局 定位布局 FlexBox布局（css3新引入） 4.2.掌握Flexbox模型中的术语 1.主轴和侧轴 主轴和侧轴你可以简单的理解为水平和垂直方向上的两根轴，类似x轴和y轴，默认情况下主轴是水平方向的，但是可以设置，将主轴设置成垂直方向，主轴外的另一轴就是侧轴 2.伸缩容器和伸缩项目 伸缩容器就是通过display属性设置为flex或者inline-flex的容器（盒子），伸缩项目就是这个伸缩容器下面的子元素 4.3.新版本和老版本 Flexbox布局语法规范主要分为三种： 旧版本：2009年版本，使用display:box或者display:inline-box 混合版本： 2011年版本，使用display:flexbox 或者display:inlne-flexbox 最新版本： 使用display:flex 或者 display:inlne-flex 查看Flexbox兼容性支持情况 https://caniuse.com/#search=flexbox 4.4

flex布局

由 房东的猫 提交于 2019-12-16 07:58:36
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。 以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex;} 行内元素也可以使用Flex布局。 .box{ display: inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex;} 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念 采用Flex布局的元素

工作这么久只记得收藏收藏收藏。。记点东西吧。。

由 ε祈祈猫儿з 提交于 2019-12-16 01:52:20
工作这么久只记得收藏收藏收藏。。记点东西吧。。 Flex 布局教程 6个属性 flex-direction 决定主轴的方向 flex-wrap 如何换行 flex-flow flex-direction和flex-wrap的简写 justify-content 在主轴上的对齐方式 align-items 在交叉轴上如何对齐 align-content 多根轴线的对齐方式 flex-direction flex-direction: row | row-reverse | column | column-reverse; row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 flex-wrap flex-wrap: nowrap | wrap | wrap-reverse; nowrap（默认）：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。 flex-flow flex-flow: <flex-direction> || <flex-wrap>; 默认值为row nowrap justify-content justify-content: flex-start | flex-end |

伸缩布局

由 这一生的挚爱 提交于 2019-12-15 12:34:50
伸缩布局 参考链接： https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex 以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。 CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴： Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴： 与主轴垂直的轴称作侧轴，默认是垂直方向的 方向： 默认主轴从左向右，侧轴默认从上到下 主轴和侧轴并不是固定不变的，通过flex-direction可以互换。 ​ 使用说明 指定一个父盒子为伸缩盒子，即指定： display: flex 明确你需要的主侧轴方向，并设置 flex-direction 默认是row ，纵向是column 设置父盒子的属性来调整子元素的布局，例如 align-items 设置子盒子的宽高或者比例，完成具体的子元素在父盒子中的布局 各个属性介绍 flex-direction 调整主轴方向（默认为水平方向） justify-content 调整主轴对齐 align-items 调整侧轴对齐（子元素可以使用 align-self 覆盖） flex-wrap 控制是否换行 align-content 堆栈

CSS弹性布局——Flex

由 ╄→гoц情女王★ 提交于 2019-12-15 00:05:48
一 概述 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为布局的首选方案。本文主要介绍Flex布局的语法。 二 Flex布局是什么 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; /* 兼容 chrome 和 safari */ display：-webkit-flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: flex; /* 兼容 chrome 和 safari */ display：-webkit-flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 三 基本概念 采用 Flex 布局的元素，称为 Flex
订阅 flex布局