Flex学习笔记

最新推荐文章于 2025-12-30 14:34:59 发布

转载最新推荐文章于 2025-12-30 14:34:59 发布 · 191 阅读

文章标签：

本文深入解析Flex布局特性，包括display属性的使用，如inline、list-item、flex等，以及float、clear、vertical-align属性的作用。同时介绍了flex布局下的容器属性，如flex-direction、flex-wrap、justify-content、align-items和align-content，还有子项目的属性如order、flex-grow、flex-shrink、flex-basis和flex。通过本文，读者可以全面理解Flex布局的机制和应用。

一

盒子模型已经不适用于某些特殊的布局，


PS*dispaly规定元素应该生成的框的类型
.Class_{

    dispaly: inline;//将元素指定为行内元素;
    dispaly: list-item;//将元素指定为列表显示;
    dispaly: flex;//弹性布局;

}

flex弹性布局为盒子模型提供最大的灵活性，所有容器都可以指定为flex弹性布局；

//行内元素弹性布局

dispaly: inline-flex;

设为弹性布局后子元素的float，clear，vertical-align属性都将会消失。

PS****

float: right;//右浮动；即使是块元素也可以使之浮动显示；

clear: left;//在左侧不允许浮动元素。
clear: right;//在右侧不允许浮动元素。
clear: both;//在左右两侧均不允许浮动元素。
clear: none;//默认值。允许浮动元素出现在两侧。
clear: inherit;//规定应该从父元素继承 clear 属性的值。

vertical-align:

vertical-align：text-top;//定义vertical-align属性的元素顶端与父元素的字体顶端对齐;
vertical-align：middle;//行内元素居中对齐;

二

容器设置为flex布局，容器可视为被主轴(横向)和交叉轴(纵向)分割

三

flex-direction：column;
flex-wrap: wrap;                //默认下flex布局元素都在一条轴线上，使用flex-wrap可以换行；
flex-flow: column nowrap;       //他是flex-direction和flex-wrap结合；
justify-content;                //定义元素在主轴方向上的对齐方式：居中/左对齐/右对齐。。。
align-items;                    //定义元素在交叉轴上的对齐方式
align-content;                  //定义存在多根轴线时的对齐方式；

flex-direction:

flex-direction: column;//纵向展示，自顶开始,向下
flex-direction: column-reverse;//纵向展示，自底开始,向上
flex-direction: row;//横向展示，自左开始,向右
flex-direction: row-reverse;//横向展示，自右开始，向左

四

//下列属性在已经定义为flex布局的容器的子项目中定义，用于对子项目进行
//排序，放大，缩小，自定义等等操作。
order
flex-grow
flex-shrink
flex-basis
flex
align-self

原文地址