搭建移动端布局框架:重拾flex

894974231 发布于2019-08-30 15:53 / 1006人阅读

摘要：概述说起关于的文章。我觉得啊除了阮一峰老师，再也无人能出其右了，所以这里也只是聊做记录。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为，即项目的本来大小。

0x001 概述

说起关于flex的文章。我觉得啊除了阮一峰老师，再也无人能出其右了，所以这里也只是聊做记录。

0x002 基本概念

Flex container：元素添加了flex属性后就变成了flex容器,

Axes ：Flex Container的坐标轴，分为main axes(主轴)和cross axes（交轴）

Flex item：父元素一旦添加flex属性，子元素将直接变成flex子元素，将不再显示默认布局,而是沿着Flex container的主轴顺序排列,如果改变主轴方向,则子元素的排列方向也将会改变

默认样式(box定义了一个100*100的盒子，container定义了一个500*100的盒子，bg*只是背景颜色)

父元素添加flex属性

0x003 容器属性

属性简介

flex-direction：

flex-wrap：

flex-flow：

justify-content：

align-items：

align-content：

flex-direction:
这个属性可以改变主轴的方向,子元素沿着主轴排列,所以改变主轴方向将会改变子元素的排列方向

初始值: row

可选值:

row ：主轴从main start到main end

row-reverse ：主轴从main end到main start

column ：主轴从cross start到cross end

column-reverse：主轴从cross end到cross start

flex-wrap
默认情况向子元素沿着主轴排列时,如果所有子元素的总大小超过父元素,则子元素将会被压缩,该属性可以改变这种情况,使之在这种情况下换行而不压缩子元素宽度

初始值: nowrap

可选值:

nowrap : 不换行

wrap : 换行

wrap-reverse : 换行并倒序

   ![clipboard.png](/img/bVKrAI)

flex-flow
是flex-direction和flex-wrap的缩写形式

初始值: row nowrap

justify-content
该属性定义了子元素相对父容器的对齐方式

初始值 : flex-start

可选值 :

flex-start: 子元素紧靠main start

flex-end: 子元素紧靠main end

center: 子元素居中对齐

space-between: 子元素两侧无边距,等分居中对齐

space-around:子元素等分居中对齐

align-items
该属性定义子元素在交轴上的对齐方式

初始值 : stretch

可选值 :

flex-start : 子元素相对于cross start对齐

flex-end : 子元素相对于cross end对齐

center : 子元素相对于cross axes居中对齐

baseline : 子元素相对于第一个子元素的基线对齐

stretch : 如果子元素未设定高度,则拉伸至容器最大高度

align-content
该属性定义了多条主轴在交轴上的对齐方式

初始值 : stretch

可选值 :

flex-start : 多条轴线相对cross start对齐

flex-end : 多条轴线相对cross end对齐

center : 多条轴线相对cross axes居中对齐

space-between : 多条轴线两端无间距,中间等分间距对齐

space-around : 多条轴线等分间距对齐

stretch : 如果轴线未设定高度,则拉伸至容器最大高度

0x004 子元素属性

属性简介:

order

align-self

flex-grow

flex-shrink

flex-basis

order
值越小越靠接近main start

初始值 : 0

flex-grow
该属性定义子元素占据剩余空间的比例,数值越大,占据的比例越大

align-self
该属性定义该子元素相对于交轴的对齐方式

初始值 : stretch

可选值 :

flex-start : 元素相对于cross start对齐

flex-end : 元素相对于cross end对齐

center : 元素相对于cross axes居中对齐

baseline : 元素相对于第一个子元素的基线对齐

stretch : 如果元素未设定高度,则拉伸至容器最大高度

flex-shrink
该属性定义了元素的缩小比例,数值越大,缩小比例越大,0不缩放

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。(摘自阮一峰博客原文)

0x004 总结

其实当初看了许多遍阮一峰老师关于flex的博客,但是依旧没有理解.如今自己整理了一遍,发现了当初理解的误区,当初认为,flex-direction让子元素的排序方式改变,但是其flex-directory的作用是让主轴和交轴交换位置.从这个方向理解便可以真正理解flex在不同方向的布局.
也就是我们不能用x轴y轴来理解flex,而是使用主轴和交轴来理解.

0x005 下一篇文章

搭建移动端布局框架:整合flex

云服务器 GPU云服务器移动端布局 web移动端布局移动端框架移动端web前端框架

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

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

小技巧 - 收藏集 - 掘金

摘要：然而学习布局，你只要学习几个手机端页面自适应解决方案布局进阶版附源码示例前端掘金一年前笔者写了一篇手机端页面自适应解决方案布局，意外受到很多朋友的关注和喜欢。十分钟学会 Fiddler - 后端 - 掘金一.Fiddler介绍 Fiddler是一个http抓包改包工具，fiddle英文中有欺骗、伪造之意，与wireshark相比它更轻量级，上手简单，因为只能抓http和https数据...

A Loity 2019-08-20 17:45 评论0 收藏0
搭建移动端布局框架:整合flex

摘要：概述在移端的兼容并不是很好但是在移动端的支持却是很好而且布局对移动端布局来说简直就是福音但是没有经过整和处理用布局也算是艰难所以打算搭建一套基于的移动端布局工具来学习容器类容器工具类这是对和属性的封装将一个元素变成横向的容器将一个元素变成 0x001 概述 flex在移pc端的兼容并不是很好,但是在移动端的支持却是很好,而且flex布局对移动端布局来说简直就是福音.但是没有经过整和...

icyfire 2019-08-30 15:53 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0