使用Flexbox将元素放置在一个框中

Question

我一直试图让一排响应式盒子看起来更漂亮。经过大量的努力和谷歌搜索，我在这里得到专家的一句话。请查看下图：

最外面的红色是import javax.servlet.RequestDispatcher; import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; import static org.junit.Assert.assertFalse; import static org.junit.Assert.assertTrue; import static org.mockito.Mockito.*; /** * Unit tests for the {@code StockSearchServlet} class. * @author Bob Basmaji */ public class StockSearchServletTest extends HttpServlet { // private fields of this class private static HttpServletRequest request; private static HttpServletResponse response; private static StockSearchServlet servlet; private static final String SYMBOL_PARAMETER_KEY = "symbol"; private static final String STARTRANGE_PARAMETER_KEY = "startRange"; private static final String ENDRANGE_PARAMETER_KEY = "endRange"; private static final String INTERVAL_PARAMETER_KEY = "interval"; private static final String SERVICETYPE_PARAMETER_KEY = "serviceType"; /** * Sets up the logic common to each test in this class */ @Before public final void setUp() { request = mock(HttpServletRequest.class); response = mock(HttpServletResponse.class); when(request.getParameter("symbol")) .thenReturn("AAPL"); when(request.getParameter("startRange")) .thenReturn("2016-04-23 00:00:00"); when(request.getParameter("endRange")) .thenReturn("2016-07-23 00:00:00"); when(request.getParameter("interval")) .thenReturn("DAY"); when(request.getParameter("serviceType")) .thenReturn("WEB"); String symbol = request.getParameter(SYMBOL_PARAMETER_KEY); String startRange = request.getParameter(STARTRANGE_PARAMETER_KEY); String endRange = request.getParameter(ENDRANGE_PARAMETER_KEY); String interval = request.getParameter(INTERVAL_PARAMETER_KEY); String serviceType = request.getParameter(SERVICETYPE_PARAMETER_KEY); HttpSession session = mock(HttpSession.class); when(request.getSession()).thenReturn(session); final ServletContext servletContext = mock(ServletContext.class); RequestDispatcher dispatcher = mock(RequestDispatcher.class); when(servletContext.getRequestDispatcher("/stocksearchResults.jsp")).thenReturn(dispatcher); servlet = new StockSearchServlet() { public ServletContext getServletContext() { return servletContext; // return the mock } }; StockSearchBean search = new StockSearchBean(symbol, startRange, endRange, interval); try { switch (serviceType) { case ("BASIC"): search.processData(ServiceType.BASIC); break; case ("DATABASE"): search.processData(ServiceType.DATABASE); break; case ("WEB"): search.processData(ServiceType.WEB); break; default: search.processData(ServiceType.WEB); } } catch (StockServiceException e) { throw new RuntimeException(e.getMessage()); } session.setAttribute("search", search); } /** * Verifies that the doPost method throws an exception when passed null arguments * @throws ServletException * @throws IOException */ @Test(expected = NullPointerException.class) public final void testDoPostPositive() throws ServletException, IOException { servlet.doPost(null, null); } /** * Verifies that the doPost method runs without exception * @throws ServletException * @throws IOException */ @Test public final void testDoPostNegative() throws ServletException, IOException { boolean throwsException = false; try { servlet.doPost(request, response); } catch (Exception e) { throwsException = true; } assertFalse("doPost throws an exception", throwsException); } } 的自举灵活行 每个框（第一个用绿框表示）都有display:flex;

在此之前，没有任何问题，我的CSS在所有屏幕尺寸上都能完美地显示所有相同高度和宽度的方框。我只有两个问题需要帮助。

问题1：

我需要盒子的下半部分（用橙色边框表示）可能总是位于绿色框的底部。这样所有按钮都会出现在同一行中。 我尝试在每个框中使用包装器div，然后将包装器的位置属性设置为相对，将内部div（黄色和橙色）的位置属性设置为绝对。然后我将下面的一个设置为底部：0px;。但它不适用于flex，需要我提一下固定高度的包装，我不能提及。

问题2：

在带有蓝色边框的框中，我需要对齐所有线条的文字，除了应该左对齐的最后一行。

Answer 1

第1期

将display: flex分配给绿框显示的div。之后，将align-self: flex-end;添加到橙色框中。现在，橙色框应显示在绿色框的末尾。

第2期

使用以下修复程序来实现您的目标：

.blue-box {
    text-align: justify;  
    -moz-text-align-last: right;
    text-align-last: left;
}

问题在于Mac和iOS设备上的Safari不支持此功能。您必须添加更多标记以覆盖Safari。一个例子是如果可能的话，将每个文本行包装成p标记。然后你可以这样做：

.blue-box p {
    text-align: justify;  
}

.blue-box p:last-child {
    text-align: left;  
}

请报告修复程序是否适合您。

Answer 2

解决此问题的最佳方法是使用flexbox。

.promo-boxes {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color:black;
}

.promo-box {
    width: 100px;
    border: solid 1px #ccc;
    background-color:red;
    display: flex;  
}

.btns-wrapper {
  margin-top: auto;
  align-self: flex-end;
}

<div class="promo-boxes">
  <div class="promo-box">
    <div>test 2</div>
    <div class="btns-wrapper">
     <button>
     subscribe
     </button>
    </div>
  </div>
  <div class="promo-box">
  <div>
      test 3
    </div>
    <div class="btns-wrapper">
    
    </div>
  </div>
  <div class="promo-box">
  <div>
      test 4 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      loooong
    </div>
    <div class="btns-wrapper">
    
    </div>
  </div>
</div>