Użyłem bootstrap 4 , a niektóre niestandardowe CSS, aby wykonać sekcję bohatera ze wszystkimi jego przedmiotami, ale jeden wyśrodkowany poziomo i pionowo.

Wyjątkiem jest jeden element, który chcę wyrównać na dolnej części na dole strony i nadal trzymaj go w poziomie .

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin-top: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

"Zobacz wszystkie przedmioty" pozostają na dole (dzięki margin-top: auto), ale jest on nie wyśrodkowany . Zmiana kierunku flexa z wiersza do kolumny omawia cały układ, więc nie jest to droga.

Co to jest realne rozwiązanie?

1
Razvan Zamfir 3 czerwiec 2018, 11:59

3 odpowiedzi

Najlepsza odpowiedź

Powinieneś być dla tego używać flex-direction: column. Jest to idealne dla niego. Używanie układu row, aby osiągnąć to, co chcesz, tj. Masz przedmioty koncentrujące poziomo, nie jest opłacalne. Lepiej nie używasz w ogóle flex i zamiast tego korzystać z marginesów. Jeśli naprawdę chcesz użyć flex-direction: row, to jedyne rozwiązanie, o którym mogę myśleć, jest albo użyć position: absolute lub negatywnego marginesu. Nie poleciłbym jednak, ponieważ tego, czego chcesz, można go łatwo osiągnąć, używając flex-direction: column.

Oto wynik, który osiągnąłem, zmieniając 2 właściwości. Wpisz opis obrazu tutaj

Zaktualizuj styl do

// Only added flex-direction: column to this
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

// This is to target the first div, i.e. the div that contains next item and Lorem, since the div doesn't have a class.
.hero > div { 
  margin-top: auto;
}
0
Aamir Khan 3 czerwiec 2018, 09:29

Odpowiedź jest raczej prosta. Zmień przepływ Flexa kontenera do kolumny.

flex-flow:column; 

Teraz masz dwa elementy flex: div, zawierające tytuł i inne linki i stopka-p. Pierwszą sztuczką jest stworzenie Twojego Div, podczas gdy Tag P pozostaje taki sam. Więc przypisuj

flex: 1 auto; 

Do twojego div i

flex: 0 auto; 

Do swojego znacznika p. Po zrobieniu, musisz dodać

display: flex; 
justify-content: center; 
flex-flow: column; 

Do twojego div też. Czyniąc go samemu fleksji. Twój znacznik P nie wymaga większej uwagi, można również usunąć niepotrzebne marże.

To powinno załatwić sprawę.

0
evayly 3 czerwiec 2018, 09:22

Musisz zezwolić na owijanie i ustawić szerokość do div, przypuszczają na stojak

Aby zezwolić na owijanie, użyj klasy

 <section class="container d-flex hero type-text flex-wrap">

Dla DI możesz zrobić:

.hero>div {
  width:100%;
}
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero>div {
  width:100%;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text flex-wrap">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

Inną opcją jest użycie klasy flex-column

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}

.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex flex-column hero type-text ">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

W obu przykładach margines allaterów jest resetowany do:

  margin: auto auto 0 auto;

Trzymać go na dole kontenera, bez względu na kierunek flex.

0
G-Cyrillus 3 czerwiec 2018, 09:35