网络舆情分析的免费网站,公司网站怎么维护,element ui设计网站,怎么学会建自己网站的方法flex顶层设计 1.在任何流动的方向上(包括上下左右)都能进行良好的布局 2.可以以逆序 或者 以任意顺序排列布局 3.可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列 4.可以弹性的在任意的容器中伸缩大小 5.可以使子元素们在容器主轴方向上 或者 在容器侧轴方向上 进行对齐 主轴… flex顶层设计 1.在任何流动的方向上(包括上下左右)都能进行良好的布局 2.可以以逆序 或者 以任意顺序排列布局 3.可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列 4.可以弹性的在任意的容器中伸缩大小 5.可以使子元素们在容器主轴方向上 或者 在容器侧轴方向上 进行对齐 主轴和侧轴 什么是主轴 什么是侧轴 他们是如何切换的 首先每一根轴都包括 三个东西维度、方向、尺寸 所谓的维度实际上就是意思就是子元素 横着排还是竖着排(x 轴 或 y 轴方向 即排列子元素的顺序 顺序还是逆序尺寸 即width[height] 每一个子元素在主轴方向所占的位置的总和 如果主轴是水平的那么尺寸就是父元素内所有item的outerWidth总和,如果主轴是垂直的那么尺寸就是父元素的outerHeight为了方便 flex-direction flex-wrap 合并成了一个属性 flex-flow主侧轴的切换十分简单当主轴设定的时候它的垂直面就默认被设定成了侧轴flex-flow: row-reverse wrap-reverse 子元素是横着排列的主轴是水平的横轴侧轴是竖直的纵轴子元素是逆序并沿着主轴排列的从右到左子元素是换行的子元素是逆序并沿着侧轴排列的从下到上FFC (flex formatting context) Flexbox 布局新定义了格式化上下文类似 BFCblock formatting context。有多类似呢 就是除了布局和一些细节不同以外的一切规则都和 BFC 是相同的。 注意 : 我所指的Flexbox 是指设置了 display: flex; 或 display: inline-flex;的盒子。不是指单单设置了 display: flex; 的盒子。 例如设置了 display: flex; 或 display: inline-flex的元素和BFC一样不会被浮动的元素遮盖不会垂直外边距坍塌等等。 而对于设置了 display: inline-flex 的盒子来说我们可以类比 display: inline-box;行理解。即 一个被行列化后的 Flexbox。它不会独占一行但是可以设置宽和高。 但需要注意的是以下几点细节Flexbox 布局 和 Block 布局是有细微区别的 Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素vertical-align 对 Flexbox 中的子元素 是没有效果的float 和 clear 属性对 Flexbox 中的子元素是没有效果的也不会使子元素脱离文档流(但是对Flexbox 是有效果的)多栏布局column-* 在 Flexbox 中也是失效的就是说我们不能使用多栏布局在Flexbox 排列其下的子元素鱼和熊掌不可得兼嘛Flexbox 下的子元素不会继承父级容器的宽flex itemflex 子元素 CSS解析器会把 定义了 display: flex; 和 display: inline-flex; 的 Flexbox 下的子元素外部装进一个看不见的盒子里我们通过排列这些盒子来达到排序、布局、 伸缩的目的。 规范中把这种盒子 称为 flex item而子元素中包括了 标签节点 以及 文本节点。标签节点很容易理解需要注意的是文本节点。 默认情况下flex 会将 连续的文本节点 装进 flex-item 之中使文本可以和标签节点一起排序和定位。 值得注意的是空格也是文本节点所以 white-space 会影响Flexbox 中的布局 flex-item-size 如何计算的 item-size尺寸为主轴方向上item的 content 再加上自身的margin 、 border 和 padding 就是这个 item 的尺寸。 1. flex-basis 的优先级比 width[height]: 非auto; 高 如果子元素没有内容和默认固定宽高且设置了flex-basis。flex-item content以flex-basis来决定无论width[height] 设置了多少。 (可理解为 flex-basis 比 width[height]: 非auto;的优先级高) flex-basis的优先级比width[height]高无论width[height]设置多少flex-item content都以flex-basis来决定。 2.元素存在默认宽高 如果子元素有默认固定宽高例如input 标签、并且设置了 flex-basis那么它的 content以 固定宽高为下限如果flex-basis 超过了固定宽高那么flex-basis则成为其 content如果flex-basis比固定宽高小那么以固定宽高为 content。 3.元素存在 min-width[height] 或者 max-width[height] 如果flex-item 有min-width[min-height] 的限制那么flex-item content按照 min-width 值为下限如果 flex-basis 的值大于 min-width[min-height] 那么flex-item content以 flex-basis 计算。 如果flex-basis 的值小于 min-width[min-height] 那么flex-item content以min-width[min-height] 如果 min-width[min-height] 的值已经超出了容器的尺寸那么即使设置了 flex-shrink。 CSS解析器也不会进行将这个item的 content shrink而是坚持保留它的min-width[min-height] 4.width[height]: auto; 优先级等于 flex-basis。 前面提到如果给item同时设置了width[height] 和 flex-basis的话。flex-item content以flex-basis来决定。但是实际上默认的 width[height]: auto; 优先级是等于 flex-basis的。 CSS解析器对比两者的值两者谁大取谁 作为item的基本尺寸如果一个item没有内容flex-item content就会以flex-basis来决定。 但是如果item有了内容且内容撑开的尺寸比flex-basis大那么flex-item content就会以width[height]: auto; 来决定且无法被 shrink。反之如果比flex-basis小flex-item content就会以flex-basis来决定 idth: auto; 内容长度比 flex-basis 大则 flex-item content以内容长度来决定且无法shrink 如果 flex-basis 的长度大于文字内容长度那么flex-item content以 flex-basis Flexbox 布局很棒还是需要深入理解的 转载于:https://www.cnblogs.com/zhouyideboke/p/11327640.html
