CSS 弹性盒子模型一

最新推荐文章于 2024-06-14 09:42:20 发布

no99

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量313

点赞数

分类专栏： css 文章标签： CSS 盒子模型样式

本文链接：https://blog.csdn.net/zhangyunfei1984/article/details/80996090

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>

<head>
<style style="text/css">
/***
flex-direction: 
:row: 默认值，当前行顺序水平排列
:row-reverse 与ROW相同，但是是按当前行的相反顺序水平排列
:column 按当前列顺序垂直排列
:column-reverse 按当前列相反顺序垂直排列
:initial 设置该属性的默认值，即为ROW
:inherit 从父元素继承父元素的该属性值;
flex-wrap: 
:wrap  换行
:nowrap 不换行;
:wrap-reverse 效果特殊，

align-content: 
---------------------------
flex-end 按盒子元素（纵向或者横向）从后向前对齐
flex-start  按盒子元素（纵向或者横向）从前向后
center  按盒子元素（纵向或者横向）从中间对齐
stretch 


space-between
space-around
initial
inherit

***/
#div1{
width:300px;
height: 300px;
border: 1px #ccc solid;
display: flex;
flex-direction: initial;
flex-wrap: wrap;
align-content: space-around;
}

#div1 div{
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
             <div>1</div>
             <div>2</div>
             <div>3</div>
             <div>4</div>
             <div>5</div>
             <div>6</div>
             <div>7</div>
             <div>8</div>
             <div>9</div>
             <div>10</div>
             <div>11</div>
             <div>12</div>
             <div>13</div>
             <div>14</div>
</div>
</body>


</html>

align-content 属性效果：一定要关注下面第4第5种属性的效果

1. flex-start

2. flex-end

3. center

4. space-between

5. space-around

6. stretch

7. 默认

no99

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 弹性盒子模型一

<html><head><style style="text/css">/***flex-direction: :row: 默认值，当前行顺序水平排列:row-reverse 与ROW相同，但是是按当前行的相反顺序水平排列:column 按当前列顺序垂直排列:column-reverse 按当前列相反顺序垂直排列:initial 设置该属性...
复制链接

扫一扫