flex布局学习

最新推荐文章于 2024-09-18 22:09:35 发布

王子老师

最新推荐文章于 2024-09-18 22:09:35 发布

阅读量132

点赞数

文章标签： flex css

本文链接：https://blog.csdn.net/qq_37304462/article/details/112299656

版权

本文通过代码示例详细解析了CSS Flexbox布局的各种属性，包括flex-direction、flex-wrap、justify-content、align-items等，展示了如何调整元素的排列方向、是否换行、水平对齐方式及垂直对齐方式。通过实例帮助开发者更深入地理解和运用Flex布局。

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

手撕flex,向猛哥进阶：

先上代码：手动操作一次影响好深刻。

<style>
    div{
        margin: 100px;
        background-color: #fde19a;
        display: flex;
        border: 1px solid #000;
		/*flex-direction: row;*/
        /*flex-direction: column;*/
        /*flex-direction: column-reverse;*/
        /*flex-direction: row-reverse;*/
        /*flex-wrap: wrap;*/
        /*flex-wrap: nowrap;*/
        /*flex-wrap: wrap-reverse;*/
        /* flex-flow:row wrap;*/
        /*justify-content:flex-end;*/
        /*justify-content:flex-start;*/
        /*justify-content: center;*/
        /*justify-content: space-around;*/
        justify-content: space-between;
    }
    p{
        border: 2px solid blue;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 100px;
    }
</style>
<body>

<div>
    <p>王子</p>
    <p>儿子</p>
    <p>女儿</p>
<!--    <p>1</p>-->
<!--	<p>2</p>-->
<!--	<p>3</p>-->
<!--	<p>4</p>-->
<!--	<p>5</p>-->
<!--    <p>6</p>-->
<!--    <p>7</p>-->
<!--    <p>8</p>-->
</div>

flex-directioin:row
在这里插入图片描述
flex-directioin:row-reverse

flex-directioin:column-reverse,column

flex-wrap: wrap;

flex-wrap: nowrap;

flex-wrap: wrap-reverse; 第一行在下面

justify-content: flex-end

justify-content: flex-start 在这里插入图片描述
justify-content: center

justify-content: flex-around

justify-content: flex-between

<style>
	div{
		display: flex;
		border: 1px solid #000;
		height: 250px;
		/*align-items: flex-start;*/
        /*align-items: flex-end;*/
        /*align-items: center;*/
        align-items: baseline;
        margin: 100px 300px 50px 300px;
	}
	p{
		border: 1px solid red;
		width: 80px;
		text-align: center;
		margin-left: 20px;
	}
	p:nth-child(1){
		height: 80px;
        line-height: 80px;
	}
	p:nth-child(2){
		height: 160px;
	}
	p:nth-child(3){
		height: 50px;
	}
	p:nth-child(4){
		height: 100px;
	}
</style>
<body>
<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>
</body>

align-items:start
在这里插入图片描述
align-items:end

align-items:center

align-items:baseline
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210107074550657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9
align-items:stretch p标签未设置高度的时候，会自动填充

align-content 属性同flex-content类似。