Flex弹性布局基础用法全解

林钟雪

于 2024-03-12 13:29:13 发布

阅读量409

点赞数 11

分类专栏： CSS 文章标签： css3 css 前端 javascript

本文链接：https://blog.csdn.net/Lin_Zhong_/article/details/136649584

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了Flex布局的概念、使用方式，包括容器属性如flex-direction、flex-wrap、flex-flow的设置，以及对齐方式如justify-content、align-items和align-content的解释。

摘要由CSDN通过智能技术生成

一、简介

1、Flex布局介绍

1、介绍
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

2、使用方式

1、任何容器都可以指定为Flex布局
    如：
    .box{
        display: flex;            
    }
    .box2{
        display:inline-flex;    
    }
    //注：Webkit内核的浏览器，必须加上-webkit前缀
    .box3{
        display:-webkit-flex;
        display:flex;    
    }

二、容器属性

1、换行与排列

1、flex-direction
    //用于设置容器主轴的方向（即项目的排列方式）】
    //其值有四个
    row(默认):从左到右
    row-reverse:从右到左
    column:从上到下
    column-reverse:从下到上
    
2、flex-wrap
    //设置项目换行方式
    //其值有三个
    nowrap(默认):不换行
    wrap:换行，第一行在上方
    wrap-reverse:换行，第一行在下方
    
3、flex-flow
    //上述两种属性的简写形式
    //默认值为 row nowrap (没有书写顺序要求)
    //如：
    flex-flow:wrap column
    //效果见下

在这里插入图片描述

3、对齐

	0、交叉轴与主轴
	    //主轴：即水平轴
	    //交叉轴：即垂直轴
	    
	1、justify-content
	    //定义了项目在主轴上的对齐方式
	    //有五个属性值
	    flex-start(默认值):左对齐
	    flex-end:右对齐
	    center:居中
	    space-between:两端对齐，间隔相等
	    space-around:每个项目两侧间距相等
	    
	2、align-items
	    //定义了项目在交叉轴上的对齐方式
	    //有五个属性值
	    flex-start:顶端对齐
	    flex-end:底端对齐
	    center:中点对齐
	    baseline:与项目第一行文字的基线对齐
	    stretch(默认):若未设置高度，或设置为auto，将占满整个容器的高度
	    
	3、align-content
	    //当项目有多行时，此属性才生效，用于定义多行的对齐方式
	    //有六个属性值
	    flex-start:顶端对齐
	    flex-end:底端对齐
	    center:中点对齐
	    space-between:垂直两端对齐，间隔平均分布
	    space-around:每行之间间距相等
	    stretch(默认)：平铺