一、Flex简介

永恒的宁静

于 2022-10-21 16:41:18 发布

阅读量510

点赞数

分类专栏： Flex布局+CSS3 文章标签： Flex 前端布局移动端布局响应式布局

本文链接：https://blog.csdn.net/weixin_42710036/article/details/127434271

版权

布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不便，如垂直居中就不容易实现。可以简便、完整、响应式地实现各种布局。

Flexl是Fiexible Box，意为弹性(随页面大的大小变化而变化)布局，用来为盒状模型提供最大的灵活。
任八喜一个容器都可以指定为Flex布局。

.box{
   
    display: flex;
}

行内元素也可以使用Flex布局

.box{
   
    display: inline-flex;
}

Tips：

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

二、Flex基本概念

采用Flex布局的元素，称为Flex容器(flex container),简称“容器",它的所有子元素自动成为容器成员，称为Flex项目(flex item),简称"项目"。
Tips:

需要成为Flex容器的子才能叫做Flex项目
Flex容器属性和项目属性不一样的

在这里插入图片描述

容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置与边框的交叉点叫做main start，结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
在这里插入图片描述

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

.box{
   
    flex-direction: row|row-reverse|column|column-reverse;
}

属性值说明：

row(这是默认值)：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿

默认情况下，项目都排在一条线(轴线)上。flex-wrap属性定义，如果一条轴线排不下，如何换行

.box{
   
    flex-wrap:nowrap|wrap|wrap-reverse;
}

属性值说明：

nowrap(默认)：不换行，超宽后挤压在容器中
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

关注

专栏目录