盒子水平垂直居中之 flex

最新推荐文章于 2024-07-04 11:52:10 发布
最新推荐文章于 2024-07-04 11:52:10 发布
阅读量823 收藏
点赞数
文章标签： 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 1047
使用弹性盒布局-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..
使用css中的flex布局实现盒子垂直居中
莉兹Liz的博客
09-03 5588
一、Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 块级元素flex布局： #box{ display: flex; } 行内元素flex布局： #box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀： #box{ display: -webkit-f...
使用flex（新老本版方法解析）让盒子水平垂直居中
qq_41591368的博客
10-20 372
话不多说直接上代码 <!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 344
效果，一个盒子内的元素都居中。
不定宽、高的盒子垂直和水平居中方式之—display: flex
如若時光倒流
09-16 113
实现盒子box2在盒子box1中垂直和水平居中 盒子box2不定宽高，被内容撑开
使用flex布局实现div垂直居中
DrinkSiMei的博客
06-01 2万+
使用flex布局实现div垂直居中
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 1370
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
[css][移动web]flex布局的简单运用。（子盒子垂直水平居中）（圣杯布局，双飞翼布局）
belloc_li的博客
02-12 690
今天讲一下移动web最常用的flex布局。虽然flex布局方式在在pc端存在兼容性的问题，但是在移动端上就完全不用担心这个问题，可以放心使用。flex布局方式可以大大的提高编程的效率。 Flex布局 弹性布局 作用： 基于flex精确灵活的控制块级盒子的布局方式，避免浮动布局中脱离文档流的现象发生 flex布局非常适合结构化布局 设置方式 给子元素最近的父元素添加 display：flex，子元素就可以自动挤压或拉伸 组成部分 弹性容器（父盒子） 弹性盒子（子盒子） 主轴（x轴） 侧轴（y轴） 主轴对齐
弹性盒子flex，水平垂直居中
从入门到放弃的博客
12-24 2144
https://blog.csdn.net/hwhsong/article/details/83896404
flex布局实现一个盒子水平垂直居中
weixin_59438061的博客
04-16 550
<!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 555
先看效果：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 2041
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
子盒子在父盒子中水平垂直居中显示的几种方式
刘运召的博客
05-14 2205
绝对定位方式-子盒子必须有宽高 先通过设置子盒子的left、top为50%，让子盒子左上角处于中间位置，再通过设置子盒子的 margin-left、margin-top 把盒子移动到居中的位置 <style type="text/css"> *{ padding: 0; margin: 0; } .wrapper{ width: 800px; height: 800px; backgroun
flex布局详细介绍以及盒子上下左右居中对齐实例
m0_52743009的博客
09-29 7969
flex布局详细介绍以及盒子上下左右居中对齐实例
盒子居中的三种方法(最简单）
热门推荐
qq_46034942的博客
02-16 2万+
1.利用定位（子绝父相）、margin-left、和margin-top实现 子盒子相对于父盒子进行移动。在父盒子内，先移动父盒子宽的一半，再移动父盒子高的一半。此时的子盒子在父盒子的偏右下的位置，再次需要移动子盒子，将子盒子向左移动自身宽度的一半，再向上移动自身高度的一半。 缺点在于如果修改了子盒子的宽高，则就需要修改margin-left和margin-top的值 .father { /* 给父盒子设置相对定位 */ position: rel
使用Flex布局实现盒子的水平垂直居中
笔记
01-02 976
在日常的开发中，我们经常会制作登录注册框，一般这种框都是水平垂直于整个页面的，像这种的话一般都是用flex布局书写，因为这样最简洁方便。话不多说，直接上代码。
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、付费专栏及课程。

余额充值