首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用css flex设置3列卡

使用CSS Flex设置3列卡可以通过以下步骤实现:

  1. 创建HTML结构:在HTML文件中创建一个容器元素,例如一个div元素,作为卡片的父容器。在该父容器内部创建3个子元素,分别代表3列卡片。
代码语言:txt
复制
<div class="card-container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
  1. 设置CSS样式:为父容器和子元素设置相应的CSS样式,以实现3列卡片布局。
代码语言:txt
复制
.card-container {
  display: flex; /* 将父容器设置为Flex容器 */
  justify-content: space-between; /* 子元素在主轴上均匀分布 */
}

.card {
  flex-basis: 30%; /* 子元素的初始宽度为30% */
  height: 200px; /* 设置卡片的高度 */
  background-color: #f2f2f2; /* 设置卡片的背景颜色 */
}

在上述代码中,通过将父容器的display属性设置为flex,将其转换为Flex容器。通过设置justify-content属性为space-between,可以使子元素在主轴上均匀分布,形成3列布局。子元素的flex-basis属性设置为30%,表示初始宽度为父容器宽度的30%。

  1. 添加内容和样式:根据需求,为每个卡片添加内容和样式。
代码语言:txt
复制
<div class="card-container">
  <div class="card">
    <h2>Card 1</h2>
    <p>This is the content of card 1.</p>
  </div>
  <div class="card">
    <h2>Card 2</h2>
    <p>This is the content of card 2.</p>
  </div>
  <div class="card">
    <h2>Card 3</h2>
    <p>This is the content of card 3.</p>
  </div>
</div>
代码语言:txt
复制
.card {
  /* 其他样式 */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

在上述代码中,为每个卡片添加了标题和内容,并设置了一些基本的样式,例如内边距、边框圆角和阴影效果。

通过以上步骤,就可以使用CSS Flex设置3列卡片布局。这种布局适用于展示多个卡片式内容,例如产品展示、图片展示等。如果需要更多的列数,只需调整父容器的子元素数量即可。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS 使用 Flex 布局来制作一个骰子

我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置 9 个点数,但在这里我只列出了点数 1-...6 的布局方式,剩余点数的布局大家可以自行尝试在下面的代码中,我使用了 div 元素来表示骰子的一个面,使用 span 来代表一个点,只是简单的使用了一些 CSS 样式,读者可按自身喜好来设置其他 CSS...样式,我在下面使用到了 border-radius 属性,这是属于 CSS 3 的属性,用来设置边框圆角,即使元素没有边框,圆角也可以用到 background 上面,具体效果受 background-clip...影响, border-radius 是简写属性,是用来设置左上角 border-top-left-radius,右上角 border-top-right-radius,右下角 border-bottom-right-radius.../css"> .box { padding: 12px; width: 100px; height: 100px; border: 1px solid black

3.6K40

【移动端网页布局】flex 弹性布局 ① ( 传统布局与 flex 弹性布局 | flex 弹性布局简单使用 | flex 弹性布局下直接为行内元素设置宽高 | flex 弹性布局设置权重 )

, 浮动 , 定位 等样式 ; 局限性 : 鉴于上述问题 , 传统布局有很多局限性 , 移动端的页面没有必要兼容 PC 端 , 因此使用传统布局不是最佳选择 ; flex 弹性布局 特点 : 布局简单...: flex 布局非常简单 , 编写方便 , 在移动端使用效果非常好 ; 不兼容 PC 端 : 在 PC 端浏览器 , 兼容性很差 ; 不兼容低版本浏览器 : 在 IE 11 及以下的低版本浏览器中 ,...不支持使用 flex 弹性布局 ; 传统布局 与 flex 弹性布局选择 : PC 端页面 , 推荐使用 传统布局 ; 移动端页面 , 不考虑兼容 PC 端页面 , 使用 flex 弹性布局 ; 二、...flex 弹性布局简单使用 ---- 1、代码示例 - flex 弹性布局下可以直接为行内元素设置宽高 在下面的代码中 , 父容器设置flex 弹性布局显示样式 , 可以直接为该 父容器布局中的...弹性布局设置权重 在下面的代码中 , 父容器设置flex 弹性布局显示样式 , 如果子容器中都设置flex:1 样式 , 则这些子容器平均布满整个父容器 ; 代码示例 : <!

78710

css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex「建议收藏」

遇到的问题 在实际工作的过程中经常遇到图片文字的混排,需要图片与一段文字垂直居中,这个实现方法以前一直非常复杂,而flex是解决这个问题比较好的办法; css代码 display:flex; flex的是...图文混排垂直居中基本用法 用flex实现文字和图片在同一行的时候的垂直居中排列方式: 将父元素容器的display属性设为flex,而子元素的垂直方向上的margin设置为auto,就能实现图文混排的图片与文字垂直居中...: css代码: .container{ display:flex; width:30rem; height:10rem; background-color...margin垂直方向为auto之外,还能通过设置容器元素align-items来控制子元素垂直居中 css代码片段: .container3{ width:60rem; height:20rem...属性设置为wrap(自动换行)试试 .container4{ display:flex; background-color: #f99; padding:20px; flex-wrap

3.3K20

CSS3】CSS3 2D 转换 - scale 缩放 ① ( 使用 scale 设置缩放 | 使用 scale 设置缩放 与 直接设置盒子模型大小 对比 )

一、使用 scale 设置缩放 在 CSS3 中的 2D 转换 中 , 可以使用 scale 样式 , 设置 盒子模型 的缩放属性 , 可以设置 放大 和 缩小 ; scale 样式语法 : transform...:scale(x,y); scale() 中的 x 和 y 使用 逗号隔开 ; x 和 y 的值是 小数 类型 , 取值范围 大于 0 ; 借助以下样式理解 scale 语法 : 设置 transform...如 : 设置 transform:scale(2,0.5); 样式 , 表示 盒子模型 宽度放大到原来的 2 倍 , 高度缩小到原来的 0.5 倍 ; 二、使用 scale 设置缩放 与 直接设置盒子模型大小...对比 使用 transform:scale 可以设置 盒子模型 的 缩放倍数 ; 直接修改 盒子模型 大小 , 也可以实现上述相同的功能 ; 直接 修改 盒子模型 大小 , 无法设置 缩放的 中心位置...content="IE=edge"> CSS3

43810

React使用css module和className多类名设置

最近在写react的时候碰到了一个小问题:现在css样式我通过下图这样的方式直接引进来的时候,发现会和其他组件里面相同className的会有冲突的现象。...image.png 然后找了下发现有个叫做css module的。下图里框着的这刚好就是我想要的。这里是它的地址 CSS Module css module 然后看看怎么使用。...听说npm eject是个坑,还好这个也不用去eject,create-react-app 2的版本就可以直接使用了,方便快捷用起来也爽 ~ 1、使用方法的话也比较简单,正常写css或者sass之类css...预处理的文件,我这里用的是sass,下图: image.png scss文件 2、然后jsx文件这边,下图(框起来的首先是import进来,横线的是使用css文件的className): image.png...CSS Module 注意:然后有一个需要注意的。

3.8K31

CSSCSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

文章目录 一、 CSS 2.0手册使用 1、 按照文档层次查找 2、 搜索关键字查找文档 二、 font-weight 字体粗细设置 1、 语法简介 2、 代码示例 三、 font-style 字体斜体设置...1、 语法简介 2、 代码示例 四、 font 字体样式综合写法 1、 语法简介 2、 代码示例 ① 不使用综合字体样式的代码 ② 使用综合字体样式的代码 ③ 执行效果 一、 CSS 2.0手册使用...---- 1、 按照文档层次查找 CSS使用方法可在 CSS 2.0 手册 中查询 ; 这里以 查询 font-weight 字体粗细设置 为例 , 在文档左侧的 " 属性 | 字体 | font-weight...标签 粗体显示 , 则可以使用 CSS 设置其 不加粗 ; 在 CSS 中 , 可使用 font-weight 设置 字体粗细 ; font-weight 属性值设置 : normal : 默认不加粗样式...---- 1、 语法简介 在 HTML 中可以使用 i em ( 推荐使用 ) 标签 , 实现 文本斜体显示 ; 如果 使用 标签 斜体显示 , 则可以使用 CSS 设置其 不倾斜 ; 在 CSS

4.4K20

使用 CSS Checkbox Hack 技术制作一个手风琴组件

: 接下来我们来定义手风琴整体外观布局,让其具有响应式,用到了弹性盒子布局,设置display:flex, 同时又应用到了CSS的自定义变量新属性,方便我们进行统一设置和修改,示例代码如下: 然后我们定义无需列表...标签的样式,也设置其为弹性盒子布局,示例代码如下: 为了区分每个 选型,让其有分割的感觉,我们来定义其边框属性,示例代码如下: 每个选项容器,让标题默认在纵轴上进行布局,然后设置标题选项的宽度为...示例代码如下: 3、Checkbox Hack: 切换选型内容 这部分代码就像变魔法一般,当我们点击每个标题选型内容时就响应显示相关内容,这里我们使用了 :checked 伪类,以及结合 CSS的后续同胞选择器...接下来我们来动手实践吧,为了让对应选中的选项内容可见,我们使用 display: flex 让其可见,并使用 align-items: center 属性让文本内容垂直居中。...接下来我们需要在选项的内容部分添加 flex-grow: 1 的规则,让选项的内容比较少是也能占满整个父元素容器的宽度。

5.3K30

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

在本篇文章里,我们将一起学习下如何使用 CSS checkbox hack 技术纯手工撸一个响应式的手风琴组件,这个组件完全基于CSS,没有JavaScript脚本,同时又基于窗口大小进行水平和垂直之间进行样式切换...接下来我们来定义手风琴整体外观样式布局,让其具有响应式,用到了弹性盒子布局,设置 display:flex, 同时又应用到了CSS的自定义变量的新属性,方便我们进行统一设置和修改,示例代码如下: ?...每个选项容器,让标题默认在纵轴上进行布局(列布局),然后设置标题选项的宽度为70px,以及定义鼠标经过的外观样式,示例代码如下: ?...3、Checkbox Hack: 切换选项内容 这部分代码就如同变魔法一般,当我们点击每个标题选项时就会显示对应相关的内容,这里我们使用了 :checked 伪类,以及结合 CSS的后续同胞选择器(~...接下来我们来动手实践吧,为了让对应选中的选项内容可见,我们使用 display: flex 让其可见,并使用 align-items: center 属性让文本内容垂直居中。

3.2K20

浅谈多服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置

除了在代码中指定使用的 GPU 编号,还可以直接设置可见 GPU 编号,使程序/用户只对部分 GPU 可见。 操作很简单,使用环境变量 CUDA_VISIBLE_DEVICES 即可。...在 .py 脚本和 Notebook 中设置,则 import os os.environ[“CUDA_VISIBLE_DEVICES”] = “2” 还可以直接设置临时的环境变量: export...至于显存设置,可以设置使用比例(70%): gpu_options = tf.GPUOptions(per_process_gpu_memory_fraction=0.7) sess = tf.Session...= tf.ConfigProto() config.gpu_options.allow_growth = True set_session(tf.Session(config=config)) 更改使用设置...以上这篇浅谈多服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置就是小编分享给大家的全部内容了,希望能给大家一个参考。

1.5K10

实战!半小时写一个脑力小游戏

CSS 我们将使用一个简单但非常有用的配置,把它应用于所有项目: ? box-sizing: border-box属性能使元素充满整个边框,所以我们就可以不用做一些数学计算了。...把 display:flex设置给 body,并且把 margin:auto应用到到 .memory-game容器,这样可以使它将垂直水平居中。...通过把 flex-wrap的值设置为 wrap,会根据弹性元素的大小进行自适应。 ? 每个卡片的 width和 height都是用 CSS 的 calc()函数进行计算的。...当玩家点击第二张牌时,lockBoard将设置为true,条件 if (lockBoard) return;在被隐藏或匹配之前会阻止其他卡片翻转: ?...默认情况下,每个 flex-item都将其 order属性设置为 0,这意味着它们都属于同一个组,并将按源的顺序排列。 如果有多个组,则首先按组升序顺序排列。

1.7K20

如何使用 CSS 设置和自定义水平和垂直滚动条

在本文中,我们将讨论何时设置水平和垂直滚动条,如何设置它们以及如何使用CSS自定义它们的外观。...下面的截图显示了我们即将创建的侧边栏:侧边栏要创建上面的侧边栏,我们将在CSS中进行以下更改:将导航栏的显示更改为flex,并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...body的高度以使其足够长以滚动以下CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body的底部边距。...nav{ display: flex; flex-direction: column; background-color: rgba(0, 0, 0, 0.1)...使用滚动条管理内容溢出防止导航项目显示在侧边栏之外非常简单。只需使用一行CSS代码即可完成此操作,该行代码使用overflow-y属性。

64600
领券