弹性布局的介绍和使用

Yang Qi(Warm 白羊)

于 2020-07-11 14:48:05 发布

阅读量1k

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_45974687/article/details/107283808

版权

本文介绍了CSS3中的弹性布局，包括主轴和副轴的排列方式、修改主轴方向的方法、flex属性的使用以及如何实现弹性布局的换行。通过示例详细解析了justify-content、align-items和flex-direction等关键属性，帮助开发者掌握移动端布局的重要技巧。

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

弹性布局的介绍

弹性布局也叫作伸缩布局是c3中新增的一种布局方式而且移动端用的居多

注意 : 弹性布局就是加在父盒子上然后让子元素应用弹性布局

弹性布局主轴，副轴图 :
在这里插入图片描述

css:

	 <ul>
     	 	width: 400px;
            height: 350px;
            border: 1px solid black;

            list-style: none;
            padding: 0;
			
			// 让子元素应用弹性布局
			display: flex;
    </ul>

html:

	 li {
               width: 120px;
               height: 150px;
               background-color: yellow;

             
      } 

	 <ul>
        <li>我是第1个li标签</li>
        <li><