Flexbox CSS在Featherlight燈箱中不起作用。我還可以在Lightbox中定位元素，還是修復Flexbox？

我想在Featherlight燈箱內的一箇中心列中放置幾個元素。 Flexbox CSS似乎被燈箱的CSS中的東西覆蓋，所以它拒絕工作。所有東西都放在燈箱左側的默認位置。Flexbox CSS在Featherlight燈箱中不起作用。我還可以在Lightbox中定位元素，還是修復Flexbox？

的Flex刪除線：

flex strikethrough

我還是新的CSS，所以有邊距和填充玩不工作對我來說很好。要麼我設法讓元素居中，任何一邊都有多餘的空白，否則他們的位置不正確。

是否可以修復/強制flexbox工作？否則，我有什麼其他樣式選項。

CSS：

<style> 

    .logo{ 

    margin:auto; 
    width:72px; 
    height:72px; 

    } 
    .teamname{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .suburb{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .teaminfohead{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .teaminfo{ 

    margin:auto; 
    font-family: Arial, Helvetica, sans-serif; 
    } 
    .teamphoto{ 

    margin:auto; 

    } 


    .lightbox { 
    display: none; 

    } 

    .lightbox_active { 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    font-family: Arial, Helvetica, sans-serif; 
    border-style: solid; 
    border-width: 2px; 
    border-color: black; 

    } 



    </style>

HTML：

<a href="#" data-featherlight="#fl1"data-featherlight-variant="lightbox_active">Open element in lightbox</a> 
    <div class='lightbox' id='fl1'> 

      <img class='logo' id='logo' src="images/PBS.png"> 
      <h1 class='teamname' id='teamname'></h1> 
      <h2 class='suburb' id='suburb'></h2> 
      <h3 class='teaminfohead' id='teaminfohead'></h3> 
      <p class='teaminfo' id='teaminfo'></p> 
      <img class='teamphoto'id="teamphoto" src="images/PBSteam.png"> 

    </div>

來源

2016-10-04 T.Fazio

附加包裝成格收藏

.lightbox { display: none } 
 
.lightbox__wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class='lightbox' id='fl1'> 
 
<div class="lightbox__wrap"> 
 
    <img class='logo' id='logo' src="images/PBS.png"> 
 
    <h1 class='teamname' id='teamname'>ABC</h1> 
 
    <h2 class='suburb' id='suburb'>CFG</h2> 
 
    <h3 class='teaminfohead' id='teaminfohead'>jlasj dlak</h3> 
 
    <p class='teaminfo' id='teaminfo'>j laskdj ald</p> 
 
    <img class='teamphoto'id="teamphoto" src="images/PBSteam.png"> 
 
</div> 
 
</div> 
 

 

 
<a href="#" data-featherlight="#fl1"data-featherlight-variant="lightbox_active">Open element in lightbox</a>

來源

2016-10-06 14:00:01 Darango

Flexbox CSS在Featherlight燈箱中不起作用。我還可以在Lightbox中定位元素，還是修復Flexbox？

回答

相關問題