首页 > 其他分享 >弹性布局 flex 的公共的css文件

弹性布局 flex 的公共的css文件

时间:2023-12-26 17:34:31浏览次数:36  
标签:flex end center align 弹性 content css justify

/* 弹性布局 */
.flex{
  display:flex;
}
.flex1{
  flex:1;
}
.flex-column {
  flex-direction: column;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-baseline {
  align-items: baseline;
}

 



标签:flex,end,center,align,弹性,content,css,justify
From: https://blog.51cto.com/u_15740575/8985451

相关文章

  • css响应布局的@media
    这是css3中的一个特性,允许我们根据屏幕的宽高来应用不同的样式,下面是一些经典的应用:基础语法:mediaType表示媒体类型,如screen、print、speech等。mediaFeature表示媒体特性,如宽度、高度、颜色等。@mediamediaTypeand(mediaFeature){/*样式规则*/}针对屏幕的宽度,我们设......
  • flex布局
    目录简介flex容器基本概念flex-direction:决定主轴的方向(即元素的排列方向)flex-wrap:指定弹性盒子的子元素换行方式justify-content:定义了元素在主轴的对齐方式align-items:设置弹性盒子元素在交叉轴(与主轴垂直)方向上的对齐方式align-content:用于修改flex-wrap属性的行为弹......
  • 黑马pink css6
    盒子的圆角边框:圆形和圆角矩形的设置方法:盒子阴影:不占用空间文字阴影:用得不多网页布局的三种方式:标准流:占用一行或共用一行浮动定位实际开发要用这三种方式网页布局第一准则:多个块级元素纵向排列用标准流,多个块级元素横向排列用浮动浮动:将盒子移到一边,直到左边缘或右......
  • HTML学习第五天:深入理解CSS与样式
    在今天的HTML学习中,我深入了解了CSS和样式的重要性。早上,我开始学习CSS的基础知识。CSS是一种用于描述网页样式的语言,它可以使网页更加美观和易于阅读。通过使用CSS,我可以控制网页中元素的布局、颜色、字体和许多其他样式属性。我学习了如何将CSS与HTML结合使用,以及如何使用不同的......
  • ie11 css适配
    1. justify-content:space-evenly;兼容性处理justify-content:space-evenly;在IE11中不生效,替换为justify-content:space-between;&:before,&:after{content:'';display:block;}2. background-clipbackground-clip设置元素的背景(背景图片或颜色)是否延......
  • css3
    1、新增选择器是css技术的升级版本,在css2的基础上,新增了许多特性,弥补了css2的不足,使web页面的开发变得更加高效、便捷css3按模块化进行设计,比较重要的css3模块包含、选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点:CSS3是完全向后兼容,......
  • [CSS]flex弹性盒
    先来一个常用的flex样例。水平从左往右主轴,自动换行,从主轴起始位置开始分布(侧轴不设置,使用margin进行间隔):.tags{display:flex;justify-content:flex-start;flex-wrap:wrap;}.tag_item{margin:10px12px;}  Flex(弹性盒、伸缩盒)是CSS中的又一种布......
  • CSS中的各种居中
    在CSS布局时经常会需要实现水平居中,垂直居中,水平垂直居中这样的要求但是却又不是非常的在意,所以总结一下。文本水平居中1.使用text-align属性:将容器的text-align属性设置为"center",可以使文本在容器中水平居中。<style>.container{width:500px;......
  • [CSS]border-image-slice宽高不确定时自定义边框
    宽高不确定时自定义边框效果: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>borde......
  • [CSS]动画,平移到某个位置,停住
    animation-fill-mode:forwards; <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><......