盒子水平垂直居中之 flex

最新推荐文章于 2024-07-04 11:52:10 发布
最新推荐文章于 2024-07-04 11:52:10 发布
阅读量834 收藏
点赞数
文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40774743/article/details/79109914
版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style type="text/css">
*{
margin: 0;
padding-top:0;
}
.box1{
  width:400px;
  height:400px;
  background-color: pink;
}
.box2{
background-color: red;
width: 200px;
background-color: red;
}
.father{
 display: flex;
 justify-content: center;
 align-items: center;
}
.son{


}





</style>
</head>
<body>

父亲：

  • justify-content： 水平轴

   align-items 在交叉轴上的如何对齐、

flex-start | flex-end | center | baseline | stretch;
}

 

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

 

 

 

 

 

felx :1; 代表3项

flex-grow: 它指定了flex容器中剩余空间的多少应该分配给项目

felx-shink:默认1； 

flex-basis：  flex 元素在主轴方向上的初始大小  它可以设为跟width或height属性一样的值（比如350px

 

 


  <div class="box1 father">
    <div class="box2 son">I'am son,want in distance of center</div>
  </div>

</body>
</html>

yakunyang（2016）
关注
图片在div盒子中垂直水平居中显示-flex
JackieDYH的博客
11-02 1055
使用弹性盒布局-flex，巧妙的实现图片垂直水平居中 效果图 示例代码 <div class="cp bgcolor"> <img class="img01" src="../assets/images/coop/yl.png" alt="图" /> </div> .cp { width: 269px; height: 182px; // 给父标签设置 display: flex; justify-content: center; a..
如何使一个盒子水平垂直居中？
weixin_59959632的博客
08-17 141
如何使一个盒子水平垂直居中？
使用flex（新老本版方法解析）让盒子水平垂直居中
qq_41591368的博客
10-20 394
话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新老版本</title> <style> .box,
css样式flex布局之，盒子垂直居中
最新发布
m0_61265297的博客
07-04 420
效果，一个盒子内的元素都居中。
不定宽、高的盒子垂直和水平居中方式之—display: flex
如若時光倒流
09-16 120
实现盒子box2在盒子box1中垂直和水平居中 盒子box2不定宽高，被内容撑开
使用flex布局实现div垂直居中
热门推荐
DrinkSiMei的博客
06-01 2万+
使用flex布局实现div垂直居中
弹性盒子flex，水平垂直居中
从入门到放弃的博客
12-24 2157
https://blog.csdn.net/hwhsong/article/details/83896404
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
` 可以实现盒子垂直居中，这种方法适用于子盒子有或没有宽高的情况。 3. 方法三：使用 flex 布局（子盒子有或没有宽高的时候都适用） 使用 `display: flex;` 和 `align-items: center;` 可以实现盒子垂直居中，...
[css]盒子水平垂直居中的6种方法
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1403
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
flex布局实现一个盒子水平垂直居中
weixin_59438061的博客
04-16 560
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...
flex详解
anshaobiao6449的博客
04-26 580
先看效果：http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-around 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 一、Flex布局是什么？ Flex...
3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
m0_73560798的博客
06-02 2409
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
使用css中的flex布局实现盒子垂直居中
莉兹Liz的博客
09-03 5612
一、Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 块级元素flex布局： #box{ display: flex; } 行内元素flex布局： #box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀： #box{ display: -webkit-f...
子盒子在父盒子中水平垂直居中显示的几种方式
刘运召的博客
05-14 2228
绝对定位方式-子盒子必须有宽高 先通过设置子盒子的left、top为50%，让子盒子左上角处于中间位置，再通过设置子盒子的 margin-left、margin-top 把盒子移动到居中的位置 <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 800px; height: 800px; backgroun
【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-14 1万+
一、顶部固定定位搜索栏 1、固定定位盒子居中对齐 2、设置最大宽度和最小宽度 3、使用 Flex 弹性布局管理宽度 4、二倍精灵图设置 5、CSS3 中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、展示效果
元素水平垂直居中总结
本博客只是个人的知识点的小总结，方便自己查阅，能帮助到你是最好的，如果有不正确之处，欢迎你的指正
11-14 264
我们经常在项目中会遇到这样一个问题，就是需要使一个盒子，水平垂直居中在另一个盒子中，那么今天为大家整理了一下相关垂直居中的各个方法！元素水平垂直居中是面试过程中经常考的点，还是需要多多记忆，本篇文章仅仅是自己的学习笔记，希望可以帮助到你~
flex布局详细介绍以及盒子上下左右居中对齐实例
m0_52743009的博客
09-29 8036
flex布局详细介绍以及盒子上下左右居中对齐实例
如何让一个子盒子在父盒子上下左右居中?
m0_61629964的博客
04-02 1980
1.通过子绝父相定位+transform让盒子居中 我们都知道,定位的top和left值的100%的值是父盒子的宽高值,所以我们给它50%的值都各占一半 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
css让盒子水平垂直居中
07-29
要让一个盒子水平垂直居中，可以使用以下的CSS方法： 1. 使用Flexbox布局： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用绝对定位和transform属性： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 使用绝对定位和margin属性： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这些方法都可以将一个盒子水平垂直居中，你可以根据实际需求选择其中一种方法来使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值