flexbox 相关问题

CSS3模块提供灵活的布局，提供了广泛的对齐元素选项，同时无需浮动和表格。

“使用客户端”；从“下一个/链接”导入链接；从 'next/navigation' 导入 { usePathname }；常量导航栏 = () => { const 路径名 = usePathname(); 返回（ "use client"; import Link from 'next/link'; import { usePathname } from 'next/navigation'; const Navbar = () => { const pathname = usePathname(); return ( <nav className='min-h-10 h-12 bg-black px-24'> <div className='flex justify-around items-center'> <h1 className='font-bold text-white text-2xl'>Profile</h1> <ul className='flex justify-center items-center text-gray-400 gap-6'> <li> <Link className={`${pathname === '/' ? 'active' : ''}`} href={'/'}> Home </Link> </li> <li> <Link className={`${pathname === '/more' ? 'active' : ''}`} href={'/more'}> More </Link> </li> </ul> </div> </nav> ) } export default Navbar; 即使我使用了 items-center，导航栏项目也没有沿 y 轴对齐。我不确定为什么会发生这种情况任何人都可以提供帮助。我被困在这里了。这是因为您没有将 flexbox css 应用到容器元素，在您的情况下为 nav 。将 items-center 添加到 nav 元素后，它将起作用。请尝试使用以下代码库。 "use client"; import Link from 'next/link'; import { usePathname } from 'next/navigation'; const Navbar = () => { const pathname = usePathname(); return ( <nav className='flex justify-around items-center min-h-10 h-12 bg-black px-24'> <h1 className='font-bold text-white text-2xl'>Profile</h1> <ul className='flex text-gray-400 gap-6'> <li> <Link className={`${pathname === '/' ? 'active' : ''}`} href={'/'}> Home </Link> </li> <li> <Link className={`${pathname === '/more' ? 'active' : ''}`} href={'/more'}> More </Link> </li> </ul> </nav> ) } export default Navbar;

next.js flexbox tailwind-css

回答 1 投票 0

获取flex元素第一行的元素数量

正如我在问题标题中所问的那样，有没有办法可以获取 Flex 元素第一行中的元素数量？下面的图片显示了我的问题。我需要的图片数量是...

javascript html css layout flexbox

回答 2 投票 0

React Native 上使用 FlexBox 的 2 列布局

我正在尝试从项目列表中的 React Native 中进行两列布局。它似乎只有在我定义项目的宽度时才起作用，我想仅定义父宽度的百分比（0.5

react-native flexbox

回答 3 投票 0

如何让子div在其flexbox父容器换行之前换行？

我试图在将行中的最后一个 div 换行到下一行之前将其换行。这个... 我试图将行中的最后一个 div 在其换行到下一行之前将其换行。 <div class="flexcontainer"> <div class="col1">this is text</div> <div class="col2">this is text</div> <div class="col3"> <div class="contents m1">This is some other text</div> <div class="contents m2">This is some other text</div> <div class="contents m3">This is some other text</div> </div> </div> .flexcontainer{ display:flex; flex-direction:row; flex-wrap:wrap; } .col3{ display:flex; flex-direction:row; flex-wrap:wrap; } .contents{ display:inline-block; } 这是我正在处理的代码。 jsfiddle 示例这是我发布的简化代码我不太确定我之前做了什么。我能够创建一个 3 列柔性容器，其中最后一个子容器会在容器包装之前将其包装在自身内，但我似乎无法找到我之前如何做到这一点的解决方案。我希望这就是您所期待的 -“在其 Flexbox 容器包装之前使子 div 包装。”。使用 flex :shrink | wrap | basis 属性和 flex-wrap 属性来包装 div 内容。 .flexcontainer { display: flex; flex-direction: row; background-color: lightgrey; flex-wrap:wrap; } .flexcontainer>div { flex: 1 1 0; } .col3 { display: flex; flex-direction: row; flex-wrap: wrap; background-color: red; } .contents { display: inline-block; }<div class="flexcontainer"> <div class="col1">This is text</div> <div class="col2">this is text >> IT WILL BREAK AFTER HERE | | | </div> <div class="col3"> <div class="contents m1">This is some other text</div> <div class="contents m2">This is some other text</div> <div class="contents m3">This is some other text</div> <div class="contents m3">This is some other text</div> </div> </div> 一种方法是使用网格来模拟子元素的换行 .col3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } 我认为 .col3 className 在容器元素中是重复的。如果删除它，内容应该变成 3 列。

html css flexbox

回答 3 投票 0

flexbox 收缩无法按预期方式处理文本内容

我用两个弹性容器创建了一个简单的布局。两者都有一个隐式的 flex-shrink: 1 就像默认值应该是的那样。所以我预计，flex-shrink 会缩小“溢出......

css flexbox

回答 1 投票 0

将节标题与第一个内容项对齐，而不是在 Flexbox 布局中居中

我正在开发一个部分布局，其中有一个标题和一个内容容器，使用 Flexbox 将内容水平居中。内容容器容纳多个媒体卡。 ... 我正在开发一个部分布局，其中有一个标题和一个内容容器，使用 Flexbox 将内容水平居中。内容容器可容纳多个媒体卡。 <section> <h2 class="section-headline">Section Headline</h2> <div class="section-content" style="display: flex; justify-content: center; gap: 20px;"> <div style="border: 1px solid black;"> <h3>Media Card 1</h3> </div> <div style="border: 1px solid black;"> <h3>Media Card 2</h3> </div> <div style="border: 1px solid black;"> <h3>Media Card 3</h3> </div> </div> </section> 我面临的问题是标题应与第一个内容项（第一个媒体卡）的开头对齐，但我不想将其置于该部分本身的中心。如何对齐标题以匹配第一个媒体卡的开头（请参见以下屏幕截图），而不是使其与内容居中？我已经尝试过调整边距，但它似乎没有给我想要的“响应式”结果。是否有基于 Flexbox 的解决方案或简单的 CSS 方法可以实现此目的？如有任何建议，我们将不胜感激！如果我正确理解了你的作业： .section { display: flex; justify-content: center; /* Centers the entire section horizontally */ padding: 20px; } .section-container { display: flex; flex-direction: column; align-items: flex-start; /* Aligns the headline with the content */ } .section-headline { margin-bottom: 10px; /* Space between the headline and the media cards */ } .section-content { display: flex; justify-content: flex-start; gap: 20px; } .media-card { border: 1px solid black; padding: 10px; width: 200px; /* Adjust based on design */ } <section class="section"> <div class="section-container"> <h2 class="section-headline">Section Headline</h2> <div class="section-content"> <div class="media-card"> <h3>Media Card 1</h3> </div> <div class="media-card"> <h3>Media Card 2</h3> </div> <div class="media-card"> <h3>Media Card 3</h3> </div> </div> </div> </section>

html css flexbox alignment web-frontend

回答 1 投票 0

Tailwind CSS“justify-center”在与“flex-row”一起使用时有效，但不适用于“flex-col”

我最近使用 NuxtJs 构建一个网站，遇到了一个问题：我无法将组件集中在 Flex 列中。但是当我删除“flex-col”类时，一切似乎都是

css vue.js flexbox nuxt.js tailwind-css

回答 2 投票 0

如何将 PrimeVue 面板的内容部分垂直居中？

我正在使用 PrimeVue Panel 元素和 tailwind。我希望内容区域垂直居中。我不想改变标题，只改变内容区域。我尝试过将 Flex items-cen...

css flexbox tailwind-css vertical-alignment primevue

回答 1 投票 0

带有网格或弹性框的响应式输入+按钮（无媒体查询）

我在使用 Flexbox 或网格布局进行一些 CSS 分发时遇到了麻烦，事情是这样的：我有一个具有下一个配置的容器（75% 输入，25% 按钮）：这种性格应该是...