代码之家 › 专栏 › 技术社区 › Matt

将内容与flexbox居中对齐

flexbox css3 css html

Matt · 技术社区 · 7 年前

给定以下标记,当显示低于768px时,我需要将左侧的标题和图标移到右侧内容上方的中心。我有 flexbox 布局设置,但无法使flex wrap对组件的两个部分起作用,以获得响应性布局。

.FeaturesDetailed-keyFeaturesWrapper-236 {
  display: flex;
  margin-bottom: 100px;
  flex-direction: column;
  flex-wrap: wrap;
}

.FeaturesDetailed-keyFeatureTile-237 {
  margin: 0 auto;
  margin-bottom: -66px;
}

.FeaturesDetailed-keyFeatureIconWrap-243 {
  left: 35px;
  color: orange;
  position: relative;
}

.FeaturesDetailed-keyFeatureHeader-242 {
  width: 200px;
  color: #000;
  margin: -9px 0px 20px -165px;
  text-align: right;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  position: relative;
}

[class^="icon-"] {
  font-family: "icons" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  position: relative;
}

@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237 {
    flex-direction: column;
    flex-flow: wrap;
    width: 400px;
    margin: 0 auto;
    margin-top: 2.5rem;
  }
}

<div class="FeaturesDetailed-keyFeaturesWrapper-236">
  <div class="FeaturesDetailed-keyFeatureTile-237">
    <div class="FeaturesDetailed-keyFeatureIconWrap-243">
      <p class="FeaturesDetailed-keyFeatureHeader-242">Header content here</p><span class="wrap-icon Icon-root-115 FeaturesDetailed-Icon-239"><style>.icon-clone:before { content: "\e90d"}</style><span aria-hidden="true" class="icon-clone" style="font-size: 52px; line-height: 52px;"></span></span>
    </div>
    <div class="FeaturesDetailed-keyFeatureCopyWrap-238">
      <p class="FeaturesDetailed-heading-240">Lots of content here.</p>
      <p class="FeaturesDetailed-subtext-241">Subsection of content here</p>
    </div>
  </div>
</div>

Link

2 回复 | 直到 7 年前

Gaspar Teixeira 7 年前

关于:

.FeaturesDetailed-keyFeaturesWrapper-236 {
  margin-bottom: 100px;
}

.FeaturesDetailed-keyFeatureTile-237 {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.FeaturesDetailed-keyFeatureIconWrap-243 {
  color: orange;
  text-align:center;
}

.FeaturesDetailed-keyFeatureHeader-242 {
  color: #000;
  text-align: center;
}

.FeaturesDetailed-Icon-239 {
  color: orange;
  position: relative;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  width: 70%;
}

[class^="icon-"] {
  font-family: "icons" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}


@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237,
  .FeaturesDetailed-keyFeatureCopyWrap-238,
  .FeaturesDetailed-keyFeatureIconWrap-243{
    display: block;
    width: 100%;
  }
}

Michael Benjamin William Falcon 7 年前

将忽略媒体查询中的flex属性,因为目标元素不是flex容器。

.FeaturesDetailed-keyFeatureTile-237 {
  margin: 0 auto;
  margin-bottom: -66px;
}

@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237 {
    flex-direction: column;
    flex-flow: wrap;
    width: 400px;
    margin: 0 auto;
    margin-top: 2.5rem;
  }

在哪里 display: flex

尝试以下内容(为了演示的目的,我删除了很多不相关的代码):

.FeaturesDetailed-keyFeaturesWrapper-236 {
  display: flex;
  margin-bottom: 100px;
  flex-direction: column;
  flex-wrap: wrap;
}

.FeaturesDetailed-keyFeatureTile-237 {
  display: flex; /* new */
  margin: 0 auto;
  /* margin-bottom: -66px; */
}

.FeaturesDetailed-keyFeatureIconWrap-243 {
  /* left: 35px; */
  color: orange;
  flex: 0 0 200px;  /* new */
  border: 1px dashed black; /* demo */
  /* position: relative; */
}

.FeaturesDetailed-keyFeatureHeader-242 {
  /* width: 200px; */
  color: #000;
  /* margin: -9px 0px 20px -165px; */
  text-align: right;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  /* top: -145px;
  left: 120px;
  width: 600px; */
  flex: 0 0 600px; /* new */
  /*  position: relative; */
  border: 1px dashed red; /* demo */
}

[class^="icon-"] {
  font-family: "icons" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}

.FeaturesDetailed-keyFeatureCopyWrap-238 {
  top: -145px;
  left: 120px;
  width: 600px;
  /* position: relative; */
}

@media (max-width: 768px) {
  .FeaturesDetailed-keyFeatureTile-237 {
    flex-wrap: wrap;
    justify-content: center;
    width: 400px;
    margin: 0 auto;
    margin-top: 2.5rem;
  }
}

<div class="FeaturesDetailed-keyFeaturesWrapper-236">
  <div class="FeaturesDetailed-keyFeatureTile-237">
    <div class="FeaturesDetailed-keyFeatureIconWrap-243">
      <p class="FeaturesDetailed-keyFeatureHeader-242">Header content here</p><span class="wrap-icon Icon-root-115 FeaturesDetailed-Icon-239"><style>.icon-clone:before { content: "\e90d"}</style><span aria-hidden="true" class="icon-clone" style="font-size: 52px; line-height: 52px;"></span></span>
    </div>
    <div class="FeaturesDetailed-keyFeatureCopyWrap-238">
      <p class="FeaturesDetailed-heading-240">Lots of content here.</p>
      <p class="FeaturesDetailed-subtext-241">Subsection of content here</p>
    </div>
  </div>
</div>

将内容与flexbox居中对齐

jsFiddle demo