Как я могу создать адаптивный дизайн коробки

Question

Итак, у меня есть два hbox друг на друга, чтобы создать описание и содержимое каждого блока.Кажется, они выглядят хорошо при текущем размере (посмотрите на img 1).Тем не менее, это не отзывчиво.Как только я использую экран большего размера, ящики не подстраиваются под размер и просто остаются на месте (посмотрите на img 2).Иногда они даже не остаются друг на друге, а двигаются вправо или влево (см. Рис. 3).Не могли бы вы помочь мне предложить лучший дизайн, чтобы сделать мои коробки отзывчивыми?Заранее спасибо.

Изображение 1:

Изображение 2:

Изображение 3:

Вот мой код fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTabPane?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<AnchorPane id="AnchorPane" prefHeight="752.0" prefWidth="1280.0" styleClass="main-anchor-pane" stylesheets="@../../resources/css/Consolidated.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.controllers.SalesDataController">
   <children>
      <JFXTabPane fx:id="tabPane" layoutX="181.0" layoutY="91.0" prefHeight="752.0" prefWidth="1280.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <tabs>
            <Tab fx:id="addNewTab" text="Add New">
               <content>
                  <AnchorPane maxWidth="1.7976931348623157E308" prefWidth="1280.0">
                     <children>
                        <HBox layoutY="79.0" prefHeight="383.0" prefWidth="1228.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                           <children>
                              <VBox prefHeight="331.0" prefWidth="331.0" styleClass="vbox-properties">
                                 <children>
                                    <GridPane prefHeight="153.0" prefWidth="331.0">
                                       <columnConstraints>
                                          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <padding>
                                          <Insets left="10.0" right="10.0" />
                                       </padding>
                                    </GridPane>
                                 </children>
                                 <HBox.margin>
                                    <Insets left="15.0" />
                                 </HBox.margin>
                              </VBox>
                              <VBox prefHeight="312.0" prefWidth="331.0" styleClass="vbox-properties">
                                 <children>
                                    <GridPane prefHeight="179.0" prefWidth="183.0">
                                       <columnConstraints>
                                          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <padding>
                                          <Insets left="10.0" right="10.0" />
                                       </padding>
                                    </GridPane>
                                    <GridPane prefHeight="101.0" prefWidth="351.0">
                                       <columnConstraints>
                                          <ColumnConstraints />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <VBox.margin>
                                          <Insets top="30.0" />
                                       </VBox.margin>
                                    </GridPane>
                                 </children>
                                 <HBox.margin>
                                    <Insets left="71.75" right="71.75" />
                                 </HBox.margin>
                              </VBox>
                              <VBox prefHeight="166.0" prefWidth="331.0" styleClass="vbox-properties">
                                 <children>
                                    <GridPane prefHeight="101.0" prefWidth="331.0">
                                       <columnConstraints>
                                          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <padding>
                                          <Insets left="10.0" right="10.0" />
                                       </padding>
                                    </GridPane>
                                 </children>
                              </VBox>
                           </children>
                           <padding>
                              <Insets left="71.75" right="71.75" />
                           </padding>
                        </HBox>
                        <HBox alignment="CENTER" layoutY="462.0" prefHeight="51.0" prefWidth="277.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="462.0">
                           <children>
                              <JFXButton fx:id="addButton" mnemonicParsing="false" onAction="#addAction" prefWidth="70.0" text="ADD">
                                 <HBox.margin>
                                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                                 </HBox.margin>
                                 <padding>
                                    <Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
                                 </padding>
                              </JFXButton>
                              <JFXButton fx:id="updateButton" mnemonicParsing="false" onAction="#updateSalesDataAction" prefWidth="70.0" text="UPDATE">
                                 <HBox.margin>
                                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                                 </HBox.margin>
                                 <padding>
                                    <Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
                                 </padding>
                              </JFXButton>
                              <JFXButton fx:id="clearButton" mnemonicParsing="false" onAction="#clearAction" prefWidth="70.0" text="CLEAR">
                                 <padding>
                                    <Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
                                 </padding>
                                 <HBox.margin>
                                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                                 </HBox.margin>
                              </JFXButton>
                           </children>
                        </HBox>
                        <HBox alignment="CENTER" layoutX="502.0" layoutY="521.0" prefHeight="33.0" prefWidth="277.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="521.0" />
                        <HBox layoutY="29.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                           <children>
                              <Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info A" textAlignment="CENTER">
                                 <font>
                                    <Font name="System Bold" size="18.0" />
                                 </font>
                                 <HBox.margin>
                                    <Insets left="41.0" />
                                 </HBox.margin>
                              </Label>
                              <Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info B" textAlignment="CENTER">
                                 <font>
                                    <Font name="System Bold" size="18.0" />
                                 </font>
                                 <HBox.margin>
                                    <Insets left="123.75" right="97.75" />
                                 </HBox.margin>
                              </Label>
                              <Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info C" textAlignment="CENTER">
                                 <font>
                                    <Font name="System Bold" size="18.0" />
                                 </font>
                                 <HBox.margin>
                                    <Insets left="26.0" />
                                 </HBox.margin>
                              </Label>
                           </children>
                           <padding>
                              <Insets left="71.75" right="71.75" />
                           </padding>
                        </HBox>
                     </children>
                  </AnchorPane>
               </content>
            </Tab>
         </tabs>
      </JFXTabPane>
   </children>
</AnchorPane>