响应式布局【flex】

LoftySoul 发布于2019-08-29 18:43 / 866人阅读

摘要：它的所有子元素称为项目，简称项目。注意，设为布局以后，子元素的和属性将失效。详细主轴和交叉轴的理解请看分钟彻底弄懂布局布局练习链接

响应式布局【flex】

来源于 响应式方法汇总

了解了以上响应式布局，下面重点介绍一下 flex弹性布局 ,非常有用,但是有记忆障碍的我，为了下次还能顺利的记起来，还是总结一下吧，顺便把我看的几个博客内容和大家分享一下，写的非常详细，很好理解。

写在前面--你需要知道的

1. 查看css属性兼容性情况

https://caniuse.com/

2. 盒子模型 box-sizing

content-box(标准盒子模型)

width = content-width;

解析：当盒子内容宽度固定时，设置盒子的padding和border，盒子模型宽高会变大，向外扩展，实际content内容不变(注意：margin始终在盒子外)；

border-box(IE盒子模型)

width = content-width + padding +border;

解析：当盒子内容宽度固定时，设置盒子的padding和border，盒子模型宽高不变，向内扩展，实际content内容变小(注意：margin始终在盒子外)；

3. 样式兼容（postCss插件）

vscode 自动添加 css 兼容代码插件

flex弹性布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素称为 Flex 项目（flex item），简称”项目”。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1. 弹性容器
display:flex;

2. 容器属性


justify-content------------项目在主轴上的对齐方式( 水平或垂直由flex-direction决定 )

flex-start    ( 默认 居左 )
flex-end               ( 居右 )
center( 居中 )
space-between( 两端对齐项目之间的间隔都相等 )
space-around( 每个项目两侧的间隔相等 )


align-items------------交叉轴上如何对齐( 水平或垂直由flex-direction决定 )

stretch( 默认 如果项目未设置高度或设为auto，将占满整个容器的高度 )
flex-start    ( 对齐起点 )
flex-end               ( 对齐终点 )
center( 对齐中点 )
baseline( 项目的第一行文字的基线对齐 )


flex-direction------------决定主轴的方向

row( 默认 横向排列 起点在左 )
row-reverse( 横向排列 起点在右 )
column( 纵向排列 起点在头【上】 )
row-reverse( 纵向排列 起点在尾【下】 )


flex-wrap------------子元素是否换行

nowrap( 默认 不换行 )
wrap( 换行 )
wrap-reverse( 反向换行 )

flex-flow------------ ( flex-direction属性和flex-wrap属性的简写形式 )

默认是 row nowrap

3. 项目属性

order

order: /* default 0 */

JavaScript 语法：object.style.order="2"

规定项目顺序

数值越小，排列越靠前

默认值为0

flex-grow

flex-grow: ; /* default 0 */

JavaScript 语法：object.style.flexGrow="5"

规定项目的放大比例

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）.如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍.

默认值为0

flex-shrink

flex-shrink: number|initial|inherit; /* default 1 */

JavaScript 语法：object.style.flexShrink="5"

定义了项目的缩小比例

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小.如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小.

默认值为1

flex-basis

flex-basis: number|auto|initial|inherit; /* default auto */

JavaScript 语法：object.style.flexBasis="200px"

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

它可以设为跟width或height属性一样的值（ep:300px），则项目将占据固定空间.

默认值为auto


flex
  flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;/* default 0 1 auto */

JavaScript 语法：object.style.flex="1"

默认值为0 1 auto

align-self

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;/* default auto */

JavaScript 语法：object.style.alignSelf="center"

定义单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto,元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

详细主轴和交叉轴的理解请看：30分钟彻底弄懂flex布局 布局练习链接

codepan

专线服务混合云响应式布局 asp如何响应式布局 html响应式导布局 flex布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114522.html

Flexbox响应式网页布局 - W3Schools视频02

摘要：今日继续响应式网页布局的实现，采用方案。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。因此我想做一系列的影片专门介绍这些。今日继续W3Schools响应式网页布局的实现，采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉，可以查看W3Schools的教学： W3Schools Flexbox教学...

codecraft 2019-08-30 15:56 评论0 收藏0
Flexbox响应式网页布局 - W3Schools视频02

摘要：今日继续响应式网页布局的实现，采用方案。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。因此我想做一系列的影片专门介绍这些。今日继续W3Schools响应式网页布局的实现，采用Flexbox方案。使用Flexbox实现响应式网页布局是目前最流行的做法。如果你对Flexbox并不熟悉，可以查看W3Schools的教学： W3Schools Flexbox教学...

tinylcy 2019-08-05 18:12 评论0 收藏0
响应式布局【flex】

摘要：它的所有子元素称为项目，简称项目。注意，设为布局以后，子元素的和属性将失效。详细主轴和交叉轴的理解请看分钟彻底弄懂布局布局练习链接响应式布局【flex】来源于响应式方法汇总了解了以上响应式布局，下面重点介绍一下 flex弹性布局 ,非常有用,但是有记忆障碍的我，为了下次还能顺利的记起来，还是总结一下吧，顺便把我看的几个博客内容和大家分享一下，写的非常详细，很好理解。写在前面-...

AndroidTraveler 2019-08-05 16:51 评论0 收藏0
CSS5:移动端页面(响应式)

摘要：接下来做端一般都写手机最大也就先隐藏手机菜单和按钮优先级问题解决方法直接使用用谷歌开发者工具查看优先级里面的垂直居中再把写成布局只要改成里面的子项目就变成一行了菜单导航导航导航导航导航到航导航导航导航导航方法切换元素的可见状态。 CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你...

superPershing 2019-08-30 15:53 评论0 收藏0
前端基本功-响应式布局(flex)

摘要：属性定义了多根轴线的对齐方式。负值对该属性无效。属性允许单个项目有与其他项目不一样的对齐方式，可覆盖属性。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。本文主要记录一些自己遇见的flex布局案例简单回顾一下flex常用属性 6个常用的容器属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 f...

xuexiangjys 2019-08-30 15:55 评论0 收藏0