小编LGS*_*Son的帖子

我制作了一个带有 flex 属性的导航栏。现在我希望向导航栏中的元素添加一个下拉菜单，但它没有按预期工作。

@font-face {
    font-family: Oxygen;
    src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
    margin: 0;
}
nav {
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
}
nav ul {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}
nav a {
    text-decoration: none;
    color: #777;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
}
nav a:hover {
    color: #000;
}
.logo a {
    font-size: 25px;
}
nav ul {
    list-style: none;
}
ul.drop-menu li {
    display: none;
    list-style: none;
}
li:hover > ul.drop-menu …

这是我的css代码

 body
 {
  transform: scaleX(0.67);
 }

在这个我的整个网站从右和左缩小.但我只需要从左侧缩放我该怎么做

使用Flexbox：我想在包含div的一些垂直下方放置一系列div。其中每个div L＆R是容器div宽度的70％。L div必须固定在容器的左侧，R div必须固定在容器的右侧。

L
      R
L
L
      R
      R
      R
L

我正在尝试使用 React 和 flexbox。通常我可以在 react native 中使用 flexbox 但在 react.js 中无法实现

这是我的 CSS 文件

.wrapper, html, body {
    height:100%;
    margin:0;
    position:absolute;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
.nav {
    background-color: red;
    flex:1
}
.main {
    background-color: blue;
    flex:1
}

这是我的js文件

import React, { Component } from 'react';
import './background.css';
import { Icon } from 'semantic-ui-react'
import Navbar from './navbar'

class Back extends Component {



  render() {
    return (
      <div className="wrapper">
          <div className="nav"></div>
          <div className="main"></div>
       </div>
    );
  }
} …

我正在尝试在桌面上实现响应式布局:

在移动设备上这样:

请注意以下要求:

• 边栏应该只占用适合内容所需的垂直空间.在侧边栏下方,主要部分的内容应占据整个宽度.
• 在移动设备上,侧边栏应显示在主要内容下方.

这是一个包含我的初始HTML和CSS的jsfiddle:

https://jsfiddle.net/sergkr/np6k2tj3/

和一个片段:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4;
  color: #333;
  background-color: #fff
}

section {
  margin: 1.6em 0;
}

section>h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #eceeee;
  text-transform: uppercase;
}

section>p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

main {
  flex-basis: 100%;
}

.sidebar {
  padding: 0 2em;
  background: #fbf6f4;
}

@media screen …

我有一个使用 Bootstrap 4 的网站。我正在尝试创建一个占据整个屏幕高度的布局。我认为 Bootstrap 4 中新的“flex”网格方法应该支持这一点。也许我做错了？此时，我的应用程序的高度仅填充内容所需的高度。此时，如此Bootply所示，可用区域的整个高度未填充。我的代码如下所示：

<div class="container-fluid">
  <div class="row" style="border-bottom:1px solid #000;">
    <div class="col-12">
      <ul class="list-inline">
        <li class="list-inline-item"><i class="fa fa-star"></i></li>
        <li class="list-inline-item"><h2>My Name</h2></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-3">
      <div class="row">
        <div class="col-3" style="background-color:#fff;">
          <div class="text-center">
            <i class="fa fa-users"></i>
            <div>Users</div>
          </div>

          <div class="text-center" style="color:orange;">
            <i class="fa fa-files-o"></i>
            <div>Files</div>
          </div>

          <div class="text-center">
            <i class="fa fa-cubes"></i>
            <div>Containers</div>
          </div>

          <hr>

          <div class="text-center">
            <i class="fa fa-comments"></i>
            <div>Feedback</div>
          </div>      

          <div class="text-center">
            <i class="fa fa-question-circle"></i>
            <div>Help</div>
          </div>
        </div>

        <div class="col-9" style="background-color:#eee;"> …

我有三个盒子,我想将各种组合放入一个容器中.盒子有时会以组合形式出现,有时则不然.

如果所有三个盒子都放在容器中,顶部应该有一个全宽的盒子,下面有一个两个半宽的盒子.

如果容器中有两个盒子,那么应该只有两个半宽盒子.

如果有一个盒子,它应该是全宽的.

我想出了一个使用wrap:wrap-reverse的解决方案,但它要求你在html中以相反的顺序放置元素.轻微的烦恼.

所以我使用了flex-direction:row-reverse和order来反转内容的顺序.

我对这个解决方案有一个小问题,因为如果我们想让相同的css处理5个盒子,那么使用order会产生一个不太灵活的解决方案.

现在我倾向于不使用顺序而只是生活在颠倒的HTML中.你怎么看？我在某个地方错过了一颗银弹吗？

https://jsfiddle.net/uesje5dq/

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

.item {
  flex: 1;
  flex-basis: 50%;
}

.item:nth-child(1) {
  order: 3;
}

.item:nth-child(2) {
  order: 2;
}

.item:nth-child(3) {
  order: 1;
}

================================================== =========================

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="style.css"> 
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
  </div>
</body>
</html>

我有一支笔，是我凑起来的。我有一个面板部分，里面有方形 div，具有列方向，但由于某种原因，我无法使该面板部分可滚动以适应内部的 div 的高度。我尝试了overflow-y:auto，但它的行为不正常。现在，盒子只是收缩到位。

.panel-section {
      flex-basis: 18vw;
      background-color: #BFFD19;
      padding-top: 15px;
      padding-left: 15px;
      padding-right: 30px;

      min-height: 0px;
      display: flex;
      flex-direction: column;
      .thumbnail-holder {
        margin-bottom: 15px;
        background-color: #6036AD;
        width: 95%;
        height: 160px;
      }
    }
  }

https://codepen.io/anon/pen/OzKKgy

面板部分（右侧）和框是缩略图支架。我读过有关溢出的其他文章，但这些技术对我不起作用。

我正在尝试使用 Flexbox 为我的应用程序创建一个网格系统。flex-wrap: wrap当我在弹性容器上使用时遇到问题。

在下面的示例中，是否可以在不指定高度值的情况下防止标题向下拉伸一半？我希望标题与其中的内容一样高，并且侧边栏和内容可以拉伸。

任何帮助，将不胜感激。

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.cell1 {
  flex: 1 1 100%;
  background-color: #eee;
}
.cell2 {
  flex: 1 0 25%;
  background-color: #ddd;
}
.cell3 {
  flex: 1 0 75%;
  background-color: #ccc;
}

<div class="container">
  <div class="cell1">
    Header should be collapsed
  </div>
  <div class="cell2">
    Sidebar
  </div>
  <div class="cell3">
    Content
  </div>
</div>

我正在使用flexbox css制作一个带有多个 div 的容器来水平滚动，但问题是当我尝试向容器添加更多 div 时，它移动到左侧并且显示左侧的 div 被隐藏。

我不明白这里发生了什么是代码片段和代码笔

.scroll{
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: space-evenly;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 150px;
  margin: 10px;
}

<div class="scroll">
  <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
</div>

谢谢