相关疑难解决方法(0)

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

要沿主轴对齐flex项,有一个属性:

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.

但是,这些方向可以很容易地与flex-direction财产互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

我想要一个具有特定高度的垂直菜单.

每个孩子必须填写父母的高度并且具有中间对齐的文本.

孩子的数量是随机的,所以我必须使用动态值.

Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.

为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.

我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.

1. 这个问题有解决方法吗？
2. 或者是否有一种不同的技术可以使所有.item填充父级的高度与文本垂直对齐到中间？

这里的示例jsFiddle,应该在Firefox和Chrome中查看

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div> …

此问题涉及具有完整css3支持的浏览器,包括flexbox.

我有一个Flex容器,里面有一些物品.他们都有理由灵活启动,但我希望最后一个 .end项目被证明是flex-end.有没有一个很好的方法来做到这一点,而无需修改HTML,也没有求助于绝对定位？

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

我有两个高度为90%的div,但显示效果不同.

我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.

有人能解释我为什么会遇到这个问题吗？

以下是我的代码:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>

我是Flexbox的新手,想要对齐按钮,但我看不到如何使用Flexbox处理同一行中心对齐按钮和右对齐按钮的常见情况.

然而,我发现了一种方法,所用的相同的长度右对齐项目的无形左对齐项目和柔性justify-content带space-between,使集中在该行的中间项.

Flexbox有更直接的方式吗？

.flexcontainer {
  display: flex;
  justify-content: space-between;
  width: 500px;
  height: 200px;
}
.iteminvisible {
  flex: 0 1 auto;
  width: 100px;
  height: 100px;
  visibility: hidden;
}
.itemcenter {
  flex: 0 1 auto;
  width: 150px;
  height: 100px;
  .itemright {
    flex: 0 1 auto;
    width: 100px;
    height: 100px;
  }

<div class="flexcontainer">
  <div class="iteminvisible">Other</div>
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>

我们有两个带内容的div和第三个div,它是具有绝对位置的背景.

Container是一个flexbox.

一切都在Chrome和Safari中运行良好,但Firefox和 IE11在绝对定位div中起作用,并在div之间分配空间,就像连续有3个div一样.

我做了jsfiddle的例子.有没有办法解决这个错误？ https://jsfiddle.net/s18do03e/2/

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}

<div class="container">
  <div class="c1">Content 1</div>
  <div …

我想做一些类似于justify-content:space-aroundor的事情justify-content:space-between，但使用：

• x 个项目并排在左侧，
• y 个项目并排在中间，
• z 项目并排在右侧。

通过换行元素会很简单，但我不能，因为这些项目（.left、.middle、.right）将是影响下面元素样式的复选框（并且没有良好支持的父选择器）。

我找到了这个答案来模拟first-of-class右侧，但没有找到类似于 emulate 的东西last-of-class。

/* emulate first-of-class */
.container>.right {
  margin-left: auto;
}

.container>.right~.right {
  margin-left: unset;
}

这是我当前尝试的一个片段：

/* emulate first-of-class */
.container>.right {
  margin-left: auto;
}

.container>.right~.right {
  margin-left: unset;
}

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

input {
  display: none;
}

label {
  padding: 0 10px;
  background-color: orange;
}

.container>.right {
  margin-left: auto; …

我试图将一个伪:after元素定位在菜单列表项右侧30像素.

无论项目文本的长度如何,我都希望元素向右移动30px.

我已将以下代码剥离到我认为此问题所需的最低限度.

请注意,这是一个移动菜单.菜单和a标签链接扩展了浏览器(手机)的整个宽度.

#menu-main-menu-1 li {
  position: relative;
  list-style: none;
}
#menu-main-menu-1 li a {
  padding: 18px 0;
  display: block;
  text-align: center;
}
#menu-main-menu-1 a:after {
  content: "\25CF";
  position: absolute;
  right: 0;
  left: 150px;
  top: 20px;
}

<ul id="menu-main-menu-1">
  <li class="menu-item">
    <a href="#">Menu Item</a>
  </li>
  <li class="menu-item">
    <a href="#">Long Menu Item Text</a>
  </li>
</ul>

上面的代码产生以下结果:

正如您所看到的,我需要将其放置在左侧150px处,以使元素在项目的右侧移动30px.它可以工作,但我可以预见一个问题,如果菜单项有很多文本,它将超过150px,元素将在文本中.例如:

无论长度如何,我都需要元素在文本的右边30px.所以它看起来像:

这是JSFiddle链接: JSFiddle

请注意,我已经删除了许多不影响此问题功能的不必要的样式(颜色,字体等)

任何帮助将非常感激!

谢谢

我正在使用一个简单的UL作为我的navbar,我试图将其中的1项分开UL并将其放在页面的左侧,并将其他3项保持居中,但是我似乎无法使其正常工作.我已经尝试将它包裹在一个跨度中并浮动它,我已经尝试制作一个新的UL,但这只会导致它们在不同的行上.

我只想让主页按钮与左边对齐,其余按钮要居中.也许我错过了一些明显的东西.

ul {
    list-style-type: none;
    margin: 10px 0 0 0 ;
    padding: 0;
    text-align: center;
}

li {
    display: inline;
    padding: 0 15px;
}

a {
    color: black;
    text-decoration: none;
    font-size: 30px;
}

<div class="navbar">
<nav>
    <div>
        <ul>
            <li id="homepage"><a href="#">AG Designs</a></li>
            <li id="aboutmebutton"><a href="#">About Me</a></li>
            <li id="portfoliobutton"><a href="#">Portfolio</a></li>
            <li id="contactbutton"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

在NativeScript应用程序的上下文中,我一直在努力寻找一种有效的,非hacky方式来做一些看似非常简单的事情:在布局的中心放置一个项目,在右边或左边放置另一个项目布局 - 类似于这个问题中的图像:中心和右对齐flexbox元素.这些项目应该都在一行中.(我已经查看了这些解决方案,但我不想添加一个伪元素,而且很多CSS只能用于NativeScript.)是否有某种干净,规范的方法来实现这一点默认布局？如果这不够"具体",请说我有这样的场景:

<SomeLayout>
  <Label text="Center me"></Label>
  <Label text="Pull me to the right"></Label>
</SomeLayout>

标签的文本属性描述了我正在寻找的东西.请测试任何建议或确保它们有效.